Text Area

A multi-line input for text.

A text area is a multi-line input for text.

<TextArea
  id="username"
  name="username"
  label="Username"
  autoComplete="username"
/>

Validation

Text area supports the same validation functions as the other form elements. See the validation documentation for more details.

<TextArea
  id="message"
  name="message"
  label="Message"
  validate={(value) => {
    if (!value) {
      return 'Please enter a nice message';
    } else if (value.length < 20) {
      return 'Message must be at least 20 characters long';
    }
  }}
  isRequired
/>

Other props

description

A description can be added to the text area to provide additional information to the user.

Please enter a nice message
<TextArea
  id="message"
  name="message"
  label="Message"
  description="Please enter a nice message"
/>

icon

An icon can be added to the text area.

<TextArea
  id="message"
  name="message"
  label="Message"
  icon={<RiMessageLine size={18} />}
/>

defaultValue

You can set the default value of the text area with the defaultValue prop.

<TextArea
  id="message"
  name="message"
  label="Message"
  defaultValue="Hello, world!"
/>

isRequired

A text area can be marked as required by setting the isRequired prop to true.

Please enter your username
<TextArea
  id="username"
  name="username"
  label="Username"
  description="Please enter your username"
  isRequired
/>

isInvalid

When rendered inside a form, the text area will automatically enter an invalid state and display the field error message defined by the validation function. However, it is also possible to manually set the invalid state by setting the isInvalid prop to true and pass an errorMessage prop.

Please enter your usernameMessage is too rude
<TextArea
  id="message"
  name="message"
  label="Message"
  description="Please enter a nice message"
  errorMessage="Message is too rude"
  isInvalid
  isRequired
/>

isDisabled

You can set the disabled state of the text area with the isDisabled prop.

<TextArea id="message" name="message" label="Message" isDisabled />

rows

You can set the number of rows the text area should have with the rows prop.

<TextArea id="message" name="message" label="Message" rows={10} />

Props

Extends the ComponentProps<'input'>

PropTypeDescription
labelReactNodeThe label of the text field.
descriptionReactNodeThe description of the text field.
errorMessagestringThe error message to display when the text field is invalid.
isRequiredbooleanWhether the text field is required.
isInvalidbooleanWhether the text field is invalid.
validate(value: string) => string | undefinedThe validation function to use for the text field.
autoCompletestringThe autocomplete attribute to use for the text field.
type'text' | 'email' | 'password' | 'tel' | 'url'The type of the text field.
rowsnumberThe number of rows the text area should have.
defaultValuestringThe default value of the text field.
valuestringThe value of the text field.
onChange(event: React.ChangeEvent<HTMLInputElement>) => voidThe onChange handler to use for the text field.
onBlur(event: React.FocusEvent<HTMLInputElement>) => voidThe onBlur handler to use for the text field.
onFocus(event: React.FocusEvent<HTMLInputElement>) => voidThe onFocus handler to use for the text field.