TextArea

A multi-line text input with label, description, and validation support. Shares the same accessibility and styling patterns as TextField.

Import

import { TextArea } from '@proyecto-viviana/solid-spectrum';

Basic Usage

A controlled multi-line text input.

Description

Tell us about yourself

Characters: 0

const [value, setValue] = createSignal('');

<TextArea
  label="Description"
  value={value()}
  onChange={setValue}
  placeholder="Enter a description..."
  description="Tell us about yourself"
/>

Sizes

Small, medium, and large size variants.

Small

Medium

Large

<TextArea label="Small" size="sm" placeholder="Small..." />
<TextArea label="Medium" size="md" placeholder="Medium..." />
<TextArea label="Large" size="lg" placeholder="Large..." />

Validation

Required and invalid states with error messages.

Required Field

With Error

Please enter a valid description (min 20 chars)

<TextArea label="Required" isRequired placeholder="Required field" />
<TextArea
  label="With Error"
  isInvalid
  errorMessage="This field is required"
/>

Variants

Outline and filled visual styles.

Outline (default)

Filled

<TextArea label="Outline" variant="outline" placeholder="Outline style" />
<TextArea label="Filled" variant="filled" placeholder="Filled style" />

Disabled

A disabled TextArea cannot be edited.

Disabled

<TextArea label="Disabled" value="Cannot edit this" isDisabled />

Props

Prop	Type	Default	Description
`label`	string	—	Visible label
`value`	string	—	Controlled value
`defaultValue`	string	—	Uncontrolled initial value
`onChange`	(value: string) => void	—	Called on every keystroke
`placeholder`	string	—	Placeholder text
`size`	'sm' \| 'md' \| 'lg'	`'md'`	Size variant
`variant`	'outline' \| 'filled'	`'outline'`	Visual style
`isDisabled`	boolean	`false`	Prevents interaction
`isRequired`	boolean	`false`	Marks field as required
`isInvalid`	boolean	`false`	Shows error styling
`errorMessage`	string	—	Validation error message
`description`	string	—	Helper text below the field
`rows`	number	—	Initial number of visible text rows

Accessibility

Uses native <textarea> for proper semantics
Label is associated via htmlFor / id
Error messages linked with aria-describedby
Required state communicated via aria-required
Invalid state communicated via aria-invalid