Textarea

A multi-line text input for longer form content.

Import

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

Examples

Default

<Textarea placeholder='Enter text' />

Emphasis

<div className='grid gap-2'>
  <Textarea emphasis='normal' placeholder='Normal emphasis' />
  <Textarea emphasis='subtle' placeholder='Subtle emphasis' />
</div>

Sizes

<div className='grid gap-2'>
  <Textarea size='sm' placeholder='Small' />
  <Textarea size='md' placeholder='Medium (default)' />
  <Textarea size='lg' placeholder='Large' />
</div>

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.

<div className='grid gap-4'>
  <div className='grid gap-1'>
    <p className='text-sm text-subtle'>Default</p>
    <Textarea placeholder='Click to focus' />
  </div>
  <div className='grid gap-1'>
    <p className='text-sm text-subtle'>Invalid</p>
    <Textarea aria-invalid='true' defaultValue='Invalid content' />
  </div>
  <div className='grid gap-1'>
    <p className='text-sm text-subtle'>Disabled</p>
    <Textarea disabled placeholder='Disabled' />
  </div>
</div>
View code

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.