Textarea

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

1 file

Installation

pyblade-ui add textarea

Copy this file into your project

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>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tag <pb-ui.textarea> is available in all your templates.

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

Examples

With a label

<div class="grid w-full max-w-md gap-2">
  <pb-ui.label for="message">Your message</pb-ui.label>
  <pb-ui.textarea id="message" rows="4" placeholder="Hello…"></pb-ui.textarea>
  <p class="text-sm text-muted-foreground">The field grows with its content.</p>
</div>

‹ Input group Label ›