Textarea
A Textarea allows users to enter any combination of letters, numbers, or symbols in a multi-line input box.
Design guidance
When and how to use this
Use a Textarea when the user needs to be able to enter longer, multi-line freeform input in the form of letters, numbers, or symbols. Textareas are ideal for cases where users might be pasting in longer snippets of text from their clipboard.
When to consider something else
For cases where a user needs to enter or paste shorter input, consider using a TextInput instead.
Figma
Drag in a Textarea Field from the Compositions section in the Form Controls v2
library in your Assets pane. We provide default and error states as well as a
required attribute for the field. A Textarea component is nested within,
where you can set its state (Idle, Focus, Disabled, and so on). You can
also drag in a Textarea on its own from the Components section, but we
recommend using the Field composition in most cases.
React
Textarea composes Chakra's Textarea. We offer size variants that align with
those in TextInput. We recommend wrapping your Textarea in a Field to
get a <label> element, error display below the field (if an error is
present) which will also trigger isInvalid on the Textarea.
| Prop | Description |
|---|---|
size | Sets the size of the Textarea. Use small or tiny only for especially compact interfaces. |
placeholder | Sets placeholder text for the Textarea. |
resize | By default a Textarea can be resized horizontally and vertically. Use this optional prop to constrain resizing to horizontal or vertical, or set this to none to fix the size. |
value | Sets a default value for the Textarea. |
isDisabled | If true the Textarea will be disabled. |
isInvalid | If true the Textarea will be invalid and its aria-invalid will be set to true |
React Native
TextArea is built on top of InputField and provides multi-line text input
with an optional character limit countdown.
Usage
import { TextArea } from '@hoverinc/design-system-react-native';const App = () => ( <TextArea placeholder="Enter your message..." defaultValue="Initial text" />);
Character Countdown
TextArea will automatically display a character countdown when maxLength is
provided:
import { TextArea } from '@hoverinc/design-system-react-native';const App = () => ( <TextArea placeholder="Enter your message..." maxLength={280} defaultValue="This is a sample message" />);
Error Message
import { TextArea } from '@hoverinc/design-system-react-native';const App = () => ( <TextArea placeholder="Enter your message..." errorMessage="Message is required" defaultValue="Some initial text" />);
Performance
// Good: uncontrolled with `defaultValue`<TextArea placeholder="Enter message..." defaultValue="Initial text" />// Good: uncontrolled with `ref` and `onSubmitEditing`const textAreaRef = useRef(null);const [text, setText] = useState('');<TextArea ref={textAreaRef} placeholder="Enter message..." onSubmitEditing={setText}/>// Avoid: controlled (can cause performance issues)<TextArea placeholder="Enter message..." value={value} onChangeText={setValue} />
Props
| Prop | Type | Description |
|---|---|---|
maxLength | number | Maximum number of characters allowed (enables character countdown) |
Bootstrap
Bootstrap provides styles for Textarea and label elements, using the
.form-control and .form-label classes. We match React size variants via
.form-control-sm and .form-control-tiny. Using Bootstrap's
.form-control-lg maps to our default.
| Class | Description |
|---|---|
.form-control and .form-label | Invokes Bootstrap theme styles for text inputs and labels. |
.form-control-sm and form-control-tiny | Reproduces the small (default 16/24 text) and tiny (14/20 text) size variants found in Figma and React |