Textarea

An multi-line interactive control which enables the user to type in data.

MDN textarea

text-secondary-900 bg-secondary-100 border border-secondary-200 placeholder-secondary-400 rounded transition-all focus:outline-none ring-offset-2 ring-primary-700 focus:ring-2 dark:bg-secondary-800 dark:text-white dark:border-secondary-700 dark:ring-secondary-800 dark:placeholder-secondary-600 text-base px-3 py-1.5 cursor-text

import React from 'react'
import { Textarea } from '@components/ui/textarea';

() => {
	const [value, setValue] = React.useState('Starry, starry night. Paint your palette blue and gray. Look out on a summer\'s day. With eyes that know the darkness in my soul');

  return (
    <Textarea
      value={value} 
      onChange={(evt) => setValue(evt.target.value)}
      placeholder="some description..."
    />
  );
};

The Textarea UI component uses the textarea HTML element underneath so you can pass Textarea attributes to it.

Installation

Copy and paste this Input primitive at components/ui/Input.tsx.

Copy and paste this Textarea primitive at components/ui/Textarea.tsx

Usage

import { Textarea } from '@components/ui/Textarea';

<Textarea
  name="description"
  placeholder="e.g. Starry, starry night. Paint your palette blue and gray. Look out on a summer's day. With eyes that know the darkness in my soul"
/>

Examples

Sizes

There are four sizes an textarea can have. You can adjust the variant using the size prop. By default, it uses base.

Outlined

You can use the outlined prop to make the textarea outlined.

You can toggle the outline version of a textarea by <Textarea outlined />. It is false by default.

Input Validation

Before and/or after the user submits their textarea, we validate what they've entered. We can use the success, warn, and error props to notify the users of the validation result.

Success

You can use the success prop to notify the users of a successful validation result.

Warning

You can use the warn prop to notify the users of a warning. It is recommended to avoid relying solely on color by adding an icon or a text to explain the warning.

Error

You can use the error prop to notify the users of that the validation failed. It is recommended to avoid relying solely on color by adding an icon or a text to explain the error.

Disabled State

Toggling the disabled prop to true will prevent any interactions to the textarea.

Loading State

For the loading state, you can use a loading icon and add a disabled prop to prevent any interactions to the textarea.

Selected

Toggle the selected prop will trigger the selected state.