Text Area Field is an input field that requires more information.
Component has always 100% height and width of its container. You can control size of textarea by styling its wrapper. Once the max-height is reached, a scroll bar appears to let users view the entire content of the text area field.
Text Area Field
```js
initialState = { value: '', error: null };
onInputChange = (e) => {
if (e.target.value.length > 100) {
setState({
value: e.target.value.substring(0, 100),
error: 'Validation message here'
});
} else {
setState({
value: e.target.value,
error: null
});
}
}
```
```js noeditor
initialState = { value: 'Text Area text', error: 'Validation message here' };
```
Inline Text Area Field
```js
initialState = { value: '', error: null };
onInputChange = (e) => {
if (e.target.value.length > 100) {
setState({
value: e.target.value.substring(0, 100),
error: 'Validation message here'
});
} else {
setState({
value: e.target.value,
error: null
});
}
}
```
```js noeditor
initialState = { value: 'Text Area text', error: 'Validation message here' };
```
Text Area Field Disabled
```js
```
```js noeditor
```
Best practices
- Labels:
Form labels should be short, set in sentence case, without punctuation or articles.
- Default values:
Whenever possible, pre-fill inputs with default options to reduce errors and save time.
- Placeholder text:
Only use where clarification is needed. Don’t use a placeholder text as a label.
- Validation text:
Use visuals (border + validation) to help users spot correct errors. Validate inputs as soon as the user clicks away from the input. Once the user corrects the error, the validation should disappear.
The validation text should inform the user what has happened, and what to do next. Use passive voice to avoid blaming users for the error (‘Email required’ insetead of ‘You didn’t enter the email’).
- Optional vs. required fields:
All fields in a form are assumed required, only mark optional fields.