TextAreaInput

The <TextAreaInput/> component is most commonly used in a form context, where you would nest it inside a Field to get a label, validation message and spacing, out of the box.

The text area supports the following sizes, small and medium (default). Prefer using size consistently with other form controls (a button e.g.) that support the same sizes.

Show codeCopy code

The rows props defines the number of rows visible in the text area. The default size is 4 rows with a maximum of 8 rows.

Show codeCopy code

Use the disabled prop when the user shouldn't be able to manipulate the value of the input.

Show codeCopy code

Use the invalid prop to communicate that validation has failed for this particular text input.

Show codeCopy code

The <TextAreaInput/> component supports a character counter, it's possible to define maxLimit and a minLimit. When those props are defined an error will be displayed in the bottom of the input if the user input is below or above the limits.

When the maxLimit is defined a counter will be displayed in the bottom right of the text area. When the character limit is reached the counter will turn on critical color.

Show codeCopy code

When the minLimit is defined no counter will be displayed but a message will be displayed in the bottom of the text area in case the user input is below the limit.

Show codeCopy code

When the maxLimit or minLimit is defined the component will display an error message in the bottom of the text area in case the user input is below or above the limits and clicks outside the input.

By default the component messages will be:

• maxLimit: You have exceeded the character limit
• minLimit: You need to enter at least {minLimit} characters

Those messages can be customised via the prop limitMessage which accepts an object with the following keys:

• maxLimitReached - Message displayed when the user input is above the maxLimit
• minLimitReached - Message displayed when the user input is below the minLimit

<TextAreaInput
  maxLimit={10}
  minLimit={5}
  limitMessage={{
    maxLimitReached: 'Max limit reached',
    minLimitReached: 'Minimum limit not reached',
  }}
/>

The <TextAreaInput /> also supports the following native InputHTMLAttributes (see props for a full list):

• onBlur
• onFocus
• onChange
• placeholder
• value