## 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.
  • disabledremoves 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 theresizable 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(0); 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(); 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 ); }; ```