Skip to content

Textarea

Source: client/lib/theme/vueda-tailwind/controls/index.js

The multi-line counterpart to Input.root. Same hairline + focus + aria-invalid recipe; grows vertically via field-sizing: content so the field expands with the typed text rather than holding a fixed min-height. Horizontal padding moves to px-3 py-2 (both axes) because a textarea's content box is two-dimensional.

Vue component: Textarea

SlotDefault classesDescription
root4 classesThe multi-line counterpart to Input.root. Same hairline + focus + aria-invalid recipe; grows vertically via field-sizing: content so the field expands with the typed text rather than holding a fixed min-height. Horizontal padding moves to px-3 py-2 (both axes) because a textarea's content box is two-dimensional.

root

The multi-line counterpart to Input.root. Same hairline + focus + aria-invalid recipe; grows vertically via field-sizing: content so the field expands with the typed text rather than holding a fixed min-height. Horizontal padding moves to px-3 py-2 (both axes) because a textarea's content box is two-dimensional.

Default classes:

text
placeholder:text-muted-foreground dark:bg-input/30
hairline flex field-sizing-content min-h-16 w-full rounded-vueda-field bg-transparent px-3 py-2 text-base shadow-vueda-control transition-shadow
disabled:cursor-not-allowed disabled:opacity-50 md:text-sm
focus-visible:hairline-ring focus-visible:focus-ring-shadow aria-invalid:hairline-destructive aria-invalid:focus-visible:focus-ring-shadow-destructive

Source: client/lib/theme/vueda-tailwind/controls/Textarea.theme.js:17

Documents matching: server v3.0.0a1.post1client v3.0.0-alpha.2