v1.0.11
Text Area
Stable
This component is considered stable. Reach out to the Spark team to find out more about what this means.
Installation
Install yarn add @spark-web/text-area
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
| Prop | Type | Description |
|---|
data? | DataAttributeMap | Sets data attributes for the element. |