## Feature Examples
### Size
- description: Adjust the size of the input using the `size` prop. It supports 2 sizes: - For most common cases, use the default `medium.` - Use `small` for more dense and compact layouts.
- example:
```jsx
;
```
### Height
- description: Control the height of an area by defining a minimum or maximum number of pixels, or a certain number of rows. - To define the minimum and maximum height in pixels, use `minHeight` and `maxHeight`. - Define the height of a specified number of rows with `rows`.
- example:
```jsx
;
```
### Status
- description: Control the status of the input using the `status` prop. It supports 3 states: - `error` demonstrates that a required input is missing something or the entry was invalid. - `warning` highlights an input value that might have a significant impact to a user. - `loading` shows when an input value is being uploaded to the server.
- example:
```jsx
;
```
### Status message
- description: Add text that explains the status or what action the user should take with the `statusMessage` prop. Showing the status message inline, directly below the component is preferred in all default cases. - To add an accessible inline message, wrap the component in a `` and add the `statusMessage`. - To add a status message in a tooltip that requires users to hover on the icon, use the `statusMessage` prop. Control tooltip placement with `tooltipPlacement` prop. View more inline status message examples in ``.
- example:
```jsx
For all default cases:For narrow layouts only:;
```
### Read-only and disabled
- description: Inputs can also be made read-only or disabled entirely. - `readOnly` disables adding or editing, but allows the user to copy the current value. - `disabled`removes all interactions and creates a disabled input state. Use it to highlight functions that are unavailable.
- example:
```jsx
;
```
### Resize
- description: Allow users to manually adjust the size of the input area by enabling the`resizable` prop.
- example:
```jsx
;
```
### Character count
- description: Indicate how many characters the input area contains by enabling the `hasCounter` prop. To display a counter, specify the `maxLength` of characters allowed in the field.
- example:
```jsx
() => {
const [value, setValue] = React.useState(
'This is a sentence that uses only some of the allowed characters.',
);
return (
setValue(e.target.value)}
maxLength={100}
hasCounter
/>
);
};
```
### Auto grow
- description: Grow and shrink area size according to the input by enabling `autoGrow`. Specify the starting height of an area with `minRowsAutoGrow`.
- example:
```jsx
;
```
### Auto select
- description: Click to select/highlight all the text in the area with the `autoSelect` prop.
- example:
```jsx
;
```
## Developer Examples
### Controlled
- description: Component can be used in controlled mode by passing `value` and `onChange` props.
- example:
```jsx
() => {
const [value, setValue] = React.useState('');
return setValue(e.target.value)} />;
};
```
### Force autogrow when controlled externally
- description: Auto grow feature does not work when component is used in controlled way which means using `value` and `onChange` properties. To force auto grow behaviour on state change just call ref method of component called `calculateComputedRows` which will recalculate rows on every value change.
- example:
```jsx
() => {
const [value, setValue] = React.useState('');
const ref = React.useRef(null);
React.useEffect(() => {
ref.current?.calculateComputedRows();
}, [value]);
const onInsertText = () => {
setValue((prevValue) => prevValue + 'field grows on every click ');
};
return (
setValue(e.target.value)}
autoGrow
placeholder="Click on Insert Text"
minRowsAutoGrow={1}
/>
);
};
```
## Common Use Case Examples
### Forms
- description: Use input area when the user needs to enter multiple lines of text such as product descriptions and policies. Use `` to provide a label for the field.
- example:
```jsx
() => {
const [visibleChecked, setVisibleChecked] = React.useState(true);
const [nameInputValue, setNameInputValue] = React.useState('My New Menu');
const [value, setValue] = React.useState('');
return (
{}}
title="Create new menu"
>
setNameInputValue(e.target.value)}
/>
setValue(e.target.value)}
/>
setVisibleChecked(!visibleChecked)}
/>
);
};
```
### Settings panel
- description: Use input area in settings panels to allow users to edit longer descriptions and titles.
- example:
```jsx
() => {
const [value, setValue] = React.useState('');
return (
setValue(e.target.value)}
/>
Expand
Link
);
};
```