TextArea

Installation

npx usmds add textarea

import { TextArea } from '@components/TextArea';
 
<TextArea 
  label="Text input label"
  placeholder="Enter your text here"
/>

Extends React Native's TextInput props.

Prop	Type	Default	Description
label	`string`	-	Label text displayed above the textarea.
helperText	`string`	-	Helper text displayed below the label.
error	`boolean`	`false`	When true, displays error styling.
maxLength	`number`	-	Maximum number of characters allowed.
value	`string`	`''`	The current value of the textarea.
disabled	`boolean`	`false`	When true, prevents user interaction.
className	`string`	-	Additional Tailwind classes to apply.

<TextArea 
  label="Text input label"
  placeholder="Enter your text here"
/>

<TextArea 
  label="Text input label"
  helperText="Helper text"
  placeholder="Enter your text here"
/>

<TextArea 
  label="Text input label"
  helperText="Error message"
  error={true}
  placeholder="Enter your text here"
/>

<TextArea 
  label="Text input label"
  placeholder="This field is disabled"
  disabled={true}
/>

The TextArea component uses Tailwind CSS classes for styling. Default styling includes:

The textarea has several visual states:

The TextArea component: