Kaapi UI
← Back to Design System

Textarea

Multi-line input with autosize, states, tooltip and form integration.

Sizes

<Textarea size="sm" placeholder="Textarea size sm" />
<Textarea size="md" placeholder="Textarea size md" />

Tooltip

<Textarea 
  placeholder="Avec tooltip" 
  tooltip="Ceci est une aide contextuelle" 
/>

States

<Textarea placeholder="Champ avec erreur..." aria-invalid />
<Textarea disabled defaultValue="Contenu désactivé" />

Resize Options

<Textarea placeholder="Resize vertical..." className="resize-y" rows={3} />
<Textarea placeholder="No resize..." className="resize-none" rows={3} />

Form integration

Décrivez votre projet en quelques mots


import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
 const formSchema = z.object({
        description: z.string().min(5, {
            message: "Description must be at least 5 characters.",
        }),
    });

    const form = useForm<z.infer<typeof formSchema>>({
        resolver: zodResolver(formSchema),
        defaultValues: {
            description: "",
        },
    });

    function onSubmit(data: z.infer<typeof formSchema>) {
        toast("Form submitted", {
            description: (
                <pre className="mt-2 w-[320px] rounded-md bg-neutral-950 p-4">
                    <code className="text-white">{JSON.stringify(data, null, 2)}</code>
                </pre>
            ),
        });
    }
<TextareaForm
  control={form.control}
  name="description"
  label="Description"
  description="Décrivez votre projet en quelques mots"
  placeholder="Description de votre projet..."
  isRequired
/>

API Reference

Textarea

PropsTypeDefaultDescription
size?"sm" | "md""sm"Contrôle la taille du padding.
tooltip?string—Message d’aide contextuelle.
wrapperClassName?string—Classes appliquées au wrapper.
tooltipClassName?string—Styles pour le contenu du tooltip.

TextareaForm

PropsTypeDefaultDescription
controlControl<TFieldValues>—Instance de React Hook Form.
nameFieldPath<TFieldValues>—Nom du champ dans le schéma.
label?ReactNode | string—Label affiché au-dessus.
description?ReactNode | string—Texte d’aide sous le champ.
isRequired?booleanfalseAjoute l’indicateur obligatoire.