Textarea

A multi-line text input for longer form content.

Import

import { Textarea } from '@oztix/roadie-components'

Examples

Default

<Textarea placeholder='Enter text' />

Emphasis

<Textarea emphasis='normal' placeholder='Normal emphasis' />
<Textarea emphasis='subtle' placeholder='Subtle emphasis' />

Sizes

<Textarea size='sm' placeholder='Small' />
<Textarea size='md' placeholder='Medium (default)' />
<Textarea size='lg' placeholder='Large' />

Auto resize

Uses CSS field-sizing: content to grow with the content. No manual resize handle. The textarea adjusts automatically.

<Textarea autoResize placeholder='This textarea grows as you type...' />

States

Textareas start neutral, gain an accent-coloured border and ring on focus, and switch to danger colouring when invalid.

{/* Default */}
<Textarea placeholder='Click to focus' />
{/* Invalid */}
<Textarea aria-invalid='true' defaultValue='Invalid content' />
{/* Disabled */}
<Textarea disabled placeholder='Disabled' />

Accessibility

• Label association: Always pair with a <label> (or Field.Label) using matching htmlFor/id attributes.
• Validation: Set aria-invalid="true" on invalid textareas. is-interactive-field provides visual danger styling automatically.
• Description: Use aria-describedby to link helper or error text to the textarea.