@spark-web/text-area v5.1.0
title: Text Area storybookPath: forms-textarea--default
isExperimentalPackage: false
Allows the user to input plain text spanning multiple lines.
Usage
Field
Each text area input must be accompanied by a Field with a label. Effective form labeling helps inform users the context and information required of the text area.
Examples
Controlled
const [textInput, setTextInput] = React.useState('');
return (
<Stack gap="large">
<Field label="Add some text">
<TextArea
value={textInput}
onChange={event => setTextInput(event.target.value)}
/>
</Field>
{textInput && (
<Text>
You have inputted: “<Strong>{textInput}</Strong>”
</Text>
)}
</Stack>
);
Uncontrolled
const textAreaRef = React.useRef(null);
const [, setKey] = React.useState(0);
return (
<Stack gap="large">
<Field label="Add some text">
<TextArea ref={textAreaRef} placeholder="Add some text" />
</Field>
<Button onClick={() => setKey(currentKey => currentKey + 1)}>Submit</Button>
{textAreaRef.current?.value && (
<Text>
You have inputted: “<Strong>{textAreaRef.current.value}</Strong>”
</Text>
)}
</Stack>
);
Disabled
<Stack gap="large">
<Field label="Disabled" disabled>
<TextArea placeholder="This textarea is disabled" />
</Field>
</Stack>
Message and tone
The message
is used to communicate the status of a field, such as an error
message. This will be announced on focus and can be combined with a tone
to
illustrate intent. The supported tones are: critical
, positive
and
neutral
.
<Stack gap="large">
<Field label="Critical" message="Critical message" tone="critical">
<TextArea placeholder="Critical" />
</Field>
<Field label="Positive" message="Positive message" tone="positive">
<TextArea placeholder="Positive" />
</Field>
<Field label="Neutral" message="Neutral message" tone="neutral">
<TextArea placeholder="Neutral" />
</Field>
</Stack>
Props
8 months ago
8 months ago
9 months ago
8 months ago
9 months ago
8 months ago
8 months ago
8 months ago
9 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago