Textarea

Textareas are stylized form controls with the ability of controling validation. Text Field Design Guidelines.

Edit the code below to see your changes live!

function Example() {
  const [value, setValue] = useState('');

  const handleChange = (event) => setValue(event.target.value);

  return (
    <Form>
      <FormGroup>
        <Textarea
          label="Label"
          description="Description for the textarea."
          placeholder="Placeholder"
          rows={3}
          resize={true}
          value={value}
          onChange={handleChange}
        />
      </FormGroup>
    </Form>
  );
}

function Example() {
  const [value, setValue] = useState('');
  const handleChange = (event) => setValue(event.target.value);
  return (
    <Form>
      <FormGroup>
        <Textarea
          label="Label"
          description="Description for the textarea."
          placeholder="Placeholder"
          rows={3}
          resize={true}
          value={value}
          onChange={handleChange}
        />
      </FormGroup>
    </Form>
  );
}

API

Supports all native <textarea /> element attributes.

Textarea

Prop Name	Type	Default	Description
`description`	`string` \| `FormControlDescription`		Append a description to the textarea field.
`error`	`string` \| `string[]` \| `FormControlError` \| `FormControlError[]`		Displays an error message for the field.
`label`	`string` \| `FormControlLabel`		Label element for textareas. Component with auto generate `id`'s for the accessibility API.
`labelId`	`string`		Appends an `id` to the generated label element.
`rows`	`1` \| `2` \| `3` \| `4` \| `5` \| `6` \| `7`	`3`	Determines the intial height via HTML's `row` property.
`resize`	`boolean`	`true`	Determines if the textarea is resizable vertically.

Props ending with * are required

Error State

Textareas allow you to pass in an error message that will control the styles of an input. The logic on the input can be controlled with the onChange prop.

Edit the code below to see your changes live!

<Form>
  <FormGroup>
    <Textarea
      label="Description"
      description="Description needs to be at least 64 characters long."
      value="Start of some text..."
      minLength={64}
      error="Field needs to contain at least 64 characters."
      onChange={() => null}
    />
  </FormGroup>
</Form>

<Form>
  <FormGroup>
    <Textarea
      label="Description"
      description="Description needs to be at least 64 characters long."
      value="Start of some text..."
      minLength={64}
      error="Field needs to contain at least 64 characters."
      onChange={() => null}
    />
  </FormGroup>
</Form>

Controlling Rows

By default, a Textarea displays with 3 rows. In order to set the intial amount of rows, pass in the rows prop. There can only be a maximum of 7 rows.

Edit the code below to see your changes live!

<Form>
  <FormGroup>
    <Textarea label="Label" description="Textarea with 5 rows." placeholder="Placeholder" rows={5} />
  </FormGroup>
</Form>

<Form>
  <FormGroup>
    <Textarea label="Label" description="Textarea with 5 rows." placeholder="Placeholder" rows={5} />
  </FormGroup>
</Form>

Resizable

You can also control whether Textarea components are resizeable. Resizing is only available on the vertical axis.

Edit the code below to see your changes live!

<Form>
  <FormGroup>
    <Textarea label="Label" placeholder="Textarea cannot be resized." resize={false} />
  </FormGroup>
</Form>

<Form>
  <FormGroup>
    <Textarea label="Label" placeholder="Textarea cannot be resized." resize={false} />
  </FormGroup>
</Form>

Beta