Textarea

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Enter multi-line descriptions and notes. Text starts at the top. Users can resize the field vertically. Inside Field.Root it takes the label, description and error from the field.

Don't use it to edit large amounts of code. Use a dedicated code editor instead.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

Field.Root → Field.Label + Textarea (native textarea) + Field.Description + Field.Error

Keyboard and accessibility

Enter inserts a line break. Tab moves to the next input. Native text editing and Korean IME input keep working.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { Field, Textarea } from '@surflane/ui'

<Field.Root name='description'>
  <Field.Label>Description</Field.Label>
  <Textarea rows={4} required placeholder='Describe the deployment goal' />
  <Field.Description>Keep the context concise.</Field.Description>
  <Field.Error />
</Field.Root>

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens