Textarea
A Textarea is a large text field users can type into. This pattern should be used when the expected user input is a long, multi-line text.
Example
<Textarea rows="5" cols="33" placeholder="I am placeholder text" label="Comment" infoText="The maximum length for comments is 200 characters" />
Usage Rules
Do:
- Use short and objective labels
- Communicate that a Textarea is optional by including an "optional" info after the label
- Make sure the user knows if a field is required by adding the required property.
- Make the area big enough to accommodate most expected inputs
- Validate input after users have finished interactions with the field and not before
- Indicate in the error text what the problem is and how to fix it
Don’t:
- Use a Textarea without a label
- Use a Textarea for very short inputs (use an Input instead)
- Add examples or complementary information to the label
- Replace the label with an error message. Use the info text instead
Variants
Full width
You can make the Textarea width to 100% by using the fullWidth
prop.
<div style={{width: '700px'}}> <Textarea placeholder="I am placeholder text" label="Comment" infoText="The maximum length for comments is 1000 characters" fullWidth /> </div>
Custom Height
You can add custom Textarea height by using the height
prop.
<div style={{ height: '300px'}}> <Textarea placeholder="I am placeholder text" label="Comment" height='100%' /> </div>
Label
<Textarea label="Label" />
You can add extra piece of information to the label by including a tooltip.
<Textarea label="Label" labelIconTooltip={{ content: 'hello', position: 'top' }} />
Disabled
<Textarea label="Disabled Textarea" value="You can't edit me" disabled />
Info Text
The info text is used for hints or validation messages.
When on firefox, the input and infoText
will take full width by default. If you need the input to have a fixed width and the infoText
to wrap to a second line, please either add css={}
prop, a wrapper element with a fixed width, or a fixed width to the <form>
element.
<> <Textarea infoText="Info text" label="Textarea with info text" /> <Textarea infoText="Error text" label="Textarea with error text" invalid /> </>
You can change the position of the info text to be on top of the TextArea.
Please avoid using the Info Text on top of the TextArea when you also need the optional label.
<> <Textarea infoText="Info text" infoTextTop label="Input with info text" /> <Textarea infoText="Info text really long that goes on to a second line" infoTextTop label="Input with info text" /> </>
We also support text tags inside the Info Text. Like strong
, b
, i
and a
.
function InfoText() { const infoText = `Info <b>text</b> really <i>long</i> that <a href='#'> goes </a> on to a <strong> second </strong>line`; return ( <Textarea rows="5" cols="33" placeholder="I am placeholder text" label="Comment" optionalText="optional" infoText={infoText} /> ); }
Disabled Textarea
<Textarea label="Disabled Textarea" value="You can't edit me" disabled />
Optional field
You can show the field as optional or custom text by using the optionalText
prop as string.
<Textarea rows="5" cols="33" placeholder="I am placeholder text" label="Comment" optionalText="optional" infoText="The maximum length for comments is 200 characters" />
onBlur event
function onBlurTest() { const [inputValue, setInputValue] = useState(''); const [infoText, setInfoText] = useState('The maximum length for comments is 200 characters'); const [invalid, setInvalid] = useState(false); const handleChange = (e) => { setInputValue(e.target.value); setInfoText(''); setInvalid(false); }; const onBlur = () => { if (inputValue === '') { setInfoText('Required Field!'); setInvalid(true); } if (inputValue !== '' && invalid === true) { setInfoText(''); setInvalid(false); } } return ( <Textarea rows="5" cols="33" placeholder="I am placeholder text" onChange={handleChange} onBlur={onBlur} label="Comment" value={inputValue} infoText={infoText} invalid={invalid} /> ); }
Ref
Access to native textarea element by using ref.
function InfoText() { const ref = React.createRef(); const handleChange = () => { ref.current.style.backgroundColor = 'lavender'; } return ( <Textarea rows="5" cols="33" placeholder="Type something ..." label="Comment" optionalText="optional" onChange={handleChange} ref={ref} /> ); }
Props
Name | Type | Default |
---|---|---|
disabled Native HTML attribute: Link |
| — |
css Add custom styles to this component. Use with caution. Learn more here: Link |
| — |
inputFieldCss |
| — |
label Visual Label for the textarea |
| — |
aria-label Provide at least one label(visual or non-visual) property for better accessibility. Check Accessibility page for more info: Link |
| — |
aria-labelledby Provide at least one label(visual or non-visual) property for better accessibility. Check Accessibility page for more info: Link |
| — |
id Native HTML attribute: Link .
Internally, this component uses a random id. We use it to associate an input with a label element.
As the random id might break snapshot tests it can be overridden by setting an explicit id. |
| — |
onBlur Native HTML callback: Link |
| — |
required Native HTML attribute: Link |
| — |
readOnly Native HTML attribute: Link |
| — |
onChange Native HTML callback: Link |
| — |
value The textarea's value |
| — |
labelIconTooltip The labelIconTooltip content can either be pure text or any rich content wrapped in a React component
The labelIconTooltip content will be shown when hovering the label icon.
The labelIconTooltip position is used to define the positioning of the tooltip
When the labelIconTooltip content is not provided, the label icon will be not shown. |
| — |
name Native HTML attribute: Link |
| — |
placeholder Native HTML attribute: Link |
| — |
infoText Instructions to help users correctly fill in the data |
| — |
optionalText optionalText value to show the field is optional with custom text |
| — |
infoTextTop positions the infoText on top of the Select |
| — |
invalid Visually notify the user that the provided value is invalid |
| — |
minLength Native HTML attribute: Link |
| — |
maxLength Native HTML attribute: Link |
| — |
height String prop for height to accept % and px |
| — |
rows Native HTML attribute: Link |
| — |
cols Native HTML attribute: Link |
| — |
fullWidth Boolean prop to take 100% width |
| — |
ref |
| — |
key |
| — |
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence |
| — |
* - the prop is required. |