Textarea

A specialized field for HTML textarea elements


  • Display

    Inline Flex

  • Selectors

    .textarea
  • Source

    GitHub ↗

  • Features

    TonesPriorities

<textarea class='textarea ~neutral !normal' placeholder='Write something...'></textarea>

Overview

Textareas are a specialized type of field for use with <textarea> elements. For more information on why this is useful, check out the field documentation.

Currently, the .textarea selector is simply an alias for the .field selector. It’s possible that textarea-specific features will be added in the future.

Considerations

The textarea element has no special considerations at this time.

Variants

Textareas have full tone, priority, and disabling support. Priorities are communicated through elevation.

Low Priority
Example code
<div class="md:grid grid-cols-3 gap-4">

  <textarea class="textarea ~neutral !low" placeholder="This is a textarea"></textarea>

  <textarea class="textarea ~positive !low" placeholder="This is a textarea"></textarea>

  <textarea class="textarea ~warning !low" placeholder="This is a textarea"></textarea>

  <textarea class="textarea ~critical !low" placeholder="This is a textarea"></textarea>

  <textarea class="textarea ~info !low" placeholder="This is a textarea"></textarea>

  <textarea class="textarea ~urge !low" placeholder="This is a textarea"></textarea>

</div>
Normal Priority
Example code
<div class="md:grid grid-cols-3 gap-4">

  <textarea class="textarea ~neutral !normal" placeholder="This is a textarea"></textarea>

  <textarea class="textarea ~positive !normal" placeholder="This is a textarea"></textarea>

  <textarea class="textarea ~warning !normal" placeholder="This is a textarea"></textarea>

  <textarea class="textarea ~critical !normal" placeholder="This is a textarea"></textarea>

  <textarea class="textarea ~info !normal" placeholder="This is a textarea"></textarea>

  <textarea class="textarea ~urge !normal" placeholder="This is a textarea"></textarea>

</div>
High Priority
Example code
<div class="md:grid grid-cols-3 gap-4">

  <textarea class="textarea ~neutral !high" placeholder="This is a textarea"></textarea>

  <textarea class="textarea ~positive !high" placeholder="This is a textarea"></textarea>

  <textarea class="textarea ~warning !high" placeholder="This is a textarea"></textarea>

  <textarea class="textarea ~critical !high" placeholder="This is a textarea"></textarea>

  <textarea class="textarea ~info !high" placeholder="This is a textarea"></textarea>

  <textarea class="textarea ~urge !high" placeholder="This is a textarea"></textarea>

</div>
Disabling

Accessibility

Use Aria roles and labels. When building forms, it’s easy to rely on visual guidelines to show relationships between elements. Unfortunately, this doesn’t help those interacting with your site using a screenreader or other assistive technologies. For this reason, it’s important to use ARIA labels and roles wherever possible.

Don't use color to communicate. Instead, use color to support information you communicate through text. When this isn't possible, be sure to use a title attribute.

Be mindful of contrast. What looks good to you may not be readable for others. Text contrast is a good thing!

Support all navigation modes. Some people will interact with your interface using assitive technologies and/or a keyboard. Build your interface with these different modes in mind (for example, by setting the `tab-index` attribute on all interactive elements that aren't interactive by default).

Examples

Example code
<textarea class="textarea ~neutral !normal" placeholder="This is a textarea placeholder."></textarea>
Example code
<textarea class="textarea ~neutral !normal" rows="8">This textarea has 8 rows and actual content.</textarea>
Example code
<textarea class="textarea ~neutral !normal" rows="8" disabled>This textarea has 8 rows and is disabled.</textarea>

Customization

Name Type Default Description
--color-light color sets default border color
--field-shadow-transition-speed time 75ms sets the speed of the hover and focus transition
--fallback-box-shadow box shadow sets the base box shadow
--field-disabled-opacity opacity 0.8 sets the opacity of disabled fields
--field-hover-box-shadow box shadow 0 0 1px 1px var(--color-light) sets additional box shadow on hover
--field-focus-box-shadow box shadow 0 0 0 2px var(--color-light) sets additional box shadow on focus

You can also customize this element by simply overriding any of its CSS attributes, listed here. Contextual variable defaults (e.g., --color-content) and global variables (e.g., --family-primary) are defined here.