Textarea

A multi-line text field that grows with its content.

1 fichier

Installation

pyblade-ui add textarea

Copiez ce fichier dans votre projet

components/ui/textarea.html

<textarea data-slot="textarea" {{ attributes.cn(
    "flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
    "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
    "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
) }}>{{ slot }}</textarea>

Adaptez le chemin à votre projet
Le dossier components est celui déclaré dans pyblade.toml.

Utilisation

La balise <pb-ui.textarea> est disponible dans tous vos templates.

<pb-ui.textarea name="bio" rows="4"></pb-ui.textarea>

Exemples

Avec un libellé

<div class="grid w-full max-w-md gap-2">
  <pb-ui.label for="message">Votre message</pb-ui.label>
  <pb-ui.textarea id="message" rows="4" placeholder="Bonjour…"></pb-ui.textarea>
  <p class="text-sm text-muted-foreground">Le champ s'agrandit avec son contenu.</p>
</div>

‹ Input group Label ›