Text area

Form fields have a required name property, so that's the only property you have to pass to TextArea to start using it. If you need to handle its change events, add an onChange property to it.

<TextArea name="email" placeholder="Enter your email" onChange={console.log} />

Same as when using native inputs in React, TextArea can be used as a controlled or uncontrolled component. By default, TextArea is uncontrolled and allows you to define its default value using the defaultValue property. In this case, all change events are handled automatically. This approach is helpful when pre-filling a form from a data source, but you don't need to control the further behavior of the input.

<TextArea
  name="story"
  placeholder="Tell us your story"
  defaultValue="It was a sunny day"
/>

If you need to control the state of the field manually, you can use the value property. This provides complete control of the component value and disables automatic value handling. You must update the state using the onChange handler and can add custom logic before that happens.

<TextArea
  name="story"
  placeholder="Tell us your story"
  value="It was a sunny day"
  onChange={({ value }) => {
    /* Update your state here */
    console.log({ value });
  }}
/>

TextArea comes in 3 sizes, with the medium size used by default. All sizes are aligned with the paddings of other input components like TextField or Select.

<View gap={3}>
  <TextArea name="desc" size="medium" placeholder="Enter the description" />
  <TextArea name="desc" size="large" placeholder="Enter the description" />
  <TextArea name="desc" size="xlarge" placeholder="Enter the description" />
</View>

If you want to alternate the styles of the select, you can use its faded variant.

<TextArea name="desc" placeholder="Enter the description" variant="faded" />

Otherwise, you can also use the headless variant which removes most of the styles from the select and lets you use it for custom layouts.

<TextArea name="desc" placeholder="Enter the description" variant="headless" />

The headless variant removes the focused and error outline since most of the time you would want to display them in a different place. You can use the :focus-within selector in your CSS to implement the focus state.

You can use the hasError property to show the user that TextArea is not passing the form validation.

<TextArea name="desc" hasError />

You can disable TextArea with the disabled flag. Remember that disabling the field will remove it from the form submit query.

<TextArea name="desc" disabled />

By default, TextArea displays 3 rows of content and can be resized vertically with the native browser resize control. You can either disable TextArea resizing or make it grow automatically based on its value with the resize property.

<TextArea name="desc" resize="auto" placeholder="Insert multiline text here" />

To let the user know what data you expect them to type in, add labels or status messages to your fields with the help of the FormControl utility. In case you're using xlarge TextArea size, you can also combine it with the large FormControl size for better visual alignment.

<FormControl>
  <FormControl.Label>Email</FormControl.Label>
  <TextArea name="name" placeholder="example@gmail.com" />
</FormControl>

When using the headless TextArea, you can align its text content with the rest of the page with the TextArea.Aligner utility, which adjusts the space automatically based on the size of the TextArea and the padding value it uses. By default, it applies negative margins on all sides of the field, but you can control that with the side property of the aligner.

<View gap={2}>
  <Text variant="featured-3" weight="bold">
    Create a new post
  </Text>

  <TextArea.Aligner>
    <TextArea
      variant="headless"
      placeholder="Tell us your story"
      name="content"
    />
  </TextArea.Aligner>
</View>

TextArea supports responsive syntax for the size property. Use object syntax to control its value based on the viewport size. Responsive properties are mobile-first, so selecting a value for a viewport will also apply it to all wider viewports.

<TextArea size={{ s: 'medium', l: 'large' }}>

• When using TextArea without a label, make sure to provide a text description. You can either provide the label using the FormControl utility or by passing inputAttributes={{ 'aria-label': 'Your label' }} to the component if you don't want to display it visually.

<TextArea attributes={{ "aria-label": "Description" }} />