1 | ---
|
2 | title: Text Area
|
3 | storybookPath: forms-textarea--default
|
4 | isExperimentalPackage: false
|
5 | ---
|
6 |
|
7 | Allows the user to input plain text spanning multiple lines.
|
8 |
|
9 | ## Usage
|
10 |
|
11 | ### Field
|
12 |
|
13 | Each text area input must be accompanied by a Field with a label. Effective form
|
14 | labeling helps inform users the context and information required of the text
|
15 | area.
|
16 |
|
17 | ## Examples
|
18 |
|
19 | ### Controlled
|
20 |
|
21 | ```jsx live
|
22 | const [textInput, setTextInput] = React.useState('');
|
23 |
|
24 | return (
|
25 | <Stack gap="large">
|
26 | <Field label="Add some text">
|
27 | <TextArea
|
28 | value={textInput}
|
29 | onChange={event => setTextInput(event.target.value)}
|
30 | />
|
31 | </Field>
|
32 | {textInput && (
|
33 | <Text>
|
34 | You have inputted: “<Strong>{textInput}</Strong>”
|
35 | </Text>
|
36 | )}
|
37 | </Stack>
|
38 | );
|
39 | ```
|
40 |
|
41 | ### Uncontrolled
|
42 |
|
43 | ```jsx live
|
44 | const textAreaRef = React.useRef(null);
|
45 | const [, setKey] = React.useState(0);
|
46 |
|
47 | return (
|
48 | <Stack gap="large">
|
49 | <Field label="Add some text">
|
50 | <TextArea ref={textAreaRef} placeholder="Add some text" />
|
51 | </Field>
|
52 | <Button onClick={() => setKey(currentKey => currentKey + 1)}>Submit</Button>
|
53 | {textAreaRef.current?.value && (
|
54 | <Text>
|
55 | You have inputted: “<Strong>{textAreaRef.current.value}</Strong>”
|
56 | </Text>
|
57 | )}
|
58 | </Stack>
|
59 | );
|
60 | ```
|
61 |
|
62 | ### Disabled
|
63 |
|
64 | ```jsx live
|
65 | <Stack gap="large">
|
66 | <Field label="Disabled" disabled>
|
67 | <TextArea placeholder="This textarea is disabled" />
|
68 | </Field>
|
69 | </Stack>
|
70 | ```
|
71 |
|
72 | ### Message and tone
|
73 |
|
74 | The `message` is used to communicate the status of a field, such as an error
|
75 | message. This will be announced on focus and can be combined with a `tone` to
|
76 | illustrate intent. The supported tones are: `critical`, `positive` and
|
77 | `neutral`.
|
78 |
|
79 | ```jsx live
|
80 | <Stack gap="large">
|
81 | <Field label="Critical" message="Critical message" tone="critical">
|
82 | <TextArea placeholder="Critical" />
|
83 | </Field>
|
84 | <Field label="Positive" message="Positive message" tone="positive">
|
85 | <TextArea placeholder="Positive" />
|
86 | </Field>
|
87 | <Field label="Neutral" message="Neutral message" tone="neutral">
|
88 | <TextArea placeholder="Neutral" />
|
89 | </Field>
|
90 | </Stack>
|
91 | ```
|
92 |
|
93 | ## Props
|
94 |
|
95 | <PropsTable displayName="TextArea" />
|
96 |
|
97 | [data-attribute-map]:
|
98 | https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
|