Tailwind CSS Textarea

Easily create Textarea with different styles using our component based on Taco. It is useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.

<Textarea 
  label="Message"
  color="blue"
/>

Textarea Variants

The Textarea component comes with 3 different variants that you can change it using the variant prop.

<Textarea 
  label="Outlined"
  color="blue"
  variant="outlined"
/>
<Textarea 
  label="Standard"
  color="blue"
  variant="standard"
/>
<Textarea 
  label="Static"
  color="blue"
  variant="static"
/>

Textarea Sizes

The Textarea component comes with 2 different sizes that you can change it using the size prop.

<Textarea 
  label="Textarea Medium"
  color="blue"
  size="md"
/>
<Textarea 
  label="Textarea Large"
  color="blue"
  size="lg"
/>

Textarea Colors

The Textarea component comes with 19 different colors that you can change it using the color prop, below there are some examples of the colors but you can check all of the them here.

Textarea Blue

Textarea Purple

Textarea Indigo

Textarea Teal

<Textarea 
  label="Textarea Blue"
  color="blue"
/>
<Textarea 
  label="Textarea Purple"
  color="purple"
/>
<Textarea 
  label="Textarea Indigo"
  color="indigo"
/>
<Textarea 
  label="Textarea Teal"
  color="teal"
/>

Textarea Validations

The Textarea component comes with error and success states for performing validations.

<Textarea 
  label="Textarea Error"
  error
/>
<Textarea 
  label="Textarea Success"
  success
/>

Disabled Textarea

A Textarea could be disabled as well, it will help you to prevent user interactions like click or focus over the Textarea component.

<Textarea 
  label="Disabled"
  color="blue"
  disabled
/>

Custom Textarea

<Textarea 
        color="blue"
        disabled="{false}"
        label="Message"
        error="{false}"
        success="{false}"
        resize="{true}"
        variant="outlined"
        size="md"
    >
</Textarea>