Textareas

The textarea element represents a multi-line plain-text editing control, 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.

Write your message Text field with helper text 1/10

Variations

Basic Text Area

Copy as:HTMLReact

Basic Text Area Base Size:

Write your message

copydone

Write your message Text field with helper text 1/10

copydone

Write your message Text field with helper text 1/10

copydone

Write your message Text field with helper text 1/10

copydone

Basic Text Area Large Size:

Write your message

copydone

Write your messageText field with helper text 1/10

copydone

Write your message Text field with helper text 1/10

copydone

Write your messageText field with helper text 1/10

copydone

<!-- Component: Plain base size basic textarea -->
<div class="relative">
  <textarea id="id-b02" type="text" name="id-b02" rows="3" placeholder="Write your message" class="relative w-full px-4 py-2 text-sm placeholder-transparent transition-all border-b outline-none focus-visible:outline-none peer border-slate-200 text-slate-500 autofill:bg-white invalid:border-pink-500 invalid:text-pink-500 focus:border-emerald-500 focus:outline-none invalid:focus:border-pink-500 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400"></textarea>
  <label for="id-b02" class="cursor-text peer-focus:cursor-default absolute left-2 -top-2 z-[1] px-2 text-xs text-slate-400 transition-all before:absolute before:top-0 before:left-0 before:z-[-1] before:block before:h-full before:w-full before:bg-white before:transition-all peer-placeholder-shown:top-2.5 peer-placeholder-shown:text-sm peer-required:after:text-pink-500 peer-required:after:content-['\00a0*'] peer-invalid:text-pink-500 peer-focus:-top-2 peer-focus:text-xs peer-focus:text-emerald-500 peer-invalid:peer-focus:text-pink-500 peer-disabled:cursor-not-allowed peer-disabled:text-slate-400 peer-disabled:before:bg-transparent">
    Write your message
  </label>
</div>
<!-- End Plain base size basic textarea -->

Outlined Text Area

Copy as:HTMLReact

Outlined Text Area Base Size:

Write your message

copydone

Write your message Text field with helper text 1/10

copydone

Write your message Text field with helper text 1/10

copydone

Write your message Text field with helper text 1/10

copydone

Outlined Text Area Large Size:

Write your message

copydone

Write your message Text field with helper text 1/10

copydone

Write your message Text field with helper text 1/10

copydone

Write your message Text field with helper text 1/10

copydone

<!-- Component: Rounded base size basic textarea -->
<div class="relative">
  <textarea id="id-01" type="text" name="id-01" placeholder="Write your message" rows="3" class="relative w-full px-4 py-2 text-sm placeholder-transparent transition-all border rounded outline-none focus-visible:outline-none peer border-slate-200 text-slate-500 autofill:bg-white invalid:border-pink-500 invalid:text-pink-500 focus:border-emerald-500 focus:outline-none invalid:focus:border-pink-500 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400"></textarea>
  <label for="id-01" class="cursor-text peer-focus:cursor-default absolute left-2 -top-2 z-[1] px-2 text-xs text-slate-400 transition-all before:absolute before:top-0 before:left-0 before:z-[-1] before:block before:h-full before:w-full before:bg-white before:transition-all peer-placeholder-shown:top-2.5 peer-placeholder-shown:text-sm peer-required:after:text-pink-500 peer-required:after:content-['\00a0*'] peer-invalid:text-pink-500 peer-focus:-top-2 peer-focus:text-xs peer-focus:text-emerald-500 peer-invalid:peer-focus:text-pink-500 peer-disabled:cursor-not-allowed peer-disabled:text-slate-400 peer-disabled:before:bg-transparent">
    Write your message
  </label>
</div>
<!-- End Rounded base size basic textarea -->

Usage

The <textarea> element defines a multi-line text input control. It's often used in a form, to collect user inputs like comments or reviews. A text area can hold an unlimited number of characters.

Specs

Textareas comes in two basic styles (base and outlined) and 2 sizes:

Base: text font size of 0.875rem (14px) and a label that scales from 0.875rem (14px) in font size, when the textarea is empty or 0.75rem (12px) when the label is floated. Helper text is also 0.75rem (12px) and a top and bottom margin of 1.5rem (24px) is used to house both the floating label and the helper text.
Large: text font size of 1rem (16px) and a label that scales from 1rem (16px) in font size, when the textarea is empty or 0.75rem (12px) when the label is floated. Helper text is also 0.75rem (12px) and a top and bottom margin of 1.5rem (24px) is used to house both the floating label and the helper text.

Accessibility notes

For better accessibility when using the <textarea> element:

An id attribute to allow the <textarea> to be associated with a <label> element for accessibility purposes.
A name attribute to set the name of the associated data point submitted to the server when the form is submitted.
Rows and cols attribute to allow you to specify an exact size for the <textarea> to take.
Default content is entered between the opening and closing tags.

Textareas

Variations

Basic Text Area

Basic Text Area Base Size:

Basic Text Area Large Size:

Outlined Text Area

Outlined Text Area Base Size:

Outlined Text Area Large Size:

Usage

Specs

Accessibility notes

Check out the latest release!