Skip to main content

Textarea

The textarea component allows the user to enter multiple lines of text in a scrollable input field.

Example

Textarea on a default theme

Best practices

Use textareas when you don’t know how much input the user will enter. Examples are special shipping instructions or a gift-card greeting. Use when you expect more than a single line of input.

Do

  • It is recommended to have some sort of hint text inside and/or label above your textareas to indicate what kind of text input the user should type. The framework will style hint text appropriately.
  • When stacking multiple textareas with the stacked option, try to keep them the same width regardless of limit on allowable input which might vary for each.
  • It might make sense to make some pre-filled textareas read-only. The framework will style them appropriately.
  • Use textareas in conjunction with other elements (i.e. form elements, submit button, etc.) in cases where collection of data is needed.
  • Use valid labels that point to correct textarea id attribute.

Don’t

  • Don’t use textarea for single-line input. Use the text-field component instead.
  • Don’t use a textarea for date or time entry. Consider using a datetime picker instead.

Also known as

Multi-line text entry
Text box

Related

Label
Text-field

Options

  • Scrollable: Add a class named f-scroll to turn the textarea into a scrollable region.
  • Flex: Add a class named f-flex to have the text box snap to the full width of the container or nearest column (minimum width of 88px, maximum width of 546px).

Development

  • Schema definition: The textarea schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Single line with scroll

<div class="c-textarea">
    <label class="c-label" for="default-textarea-1">Label</label>
    <textarea id="default-textarea-1" class="f-scroll" name="textarea-default" rows="1">This is some sample text with a line</textarea>
</div>

Multi line with scroll

<div class="c-textarea">
    <label class="c-label" for="default-textarea-4">Label</label>
    <textarea id="default-textarea-4" class="f-scroll" name="textarea-default" rows="4">This is some sample text with a very long string of text that wraps and has a total of four lines as well as a scroll bar</textarea>
</div>

Single line with flex

<div class="c-textarea">
    <label class="c-label" for="default-textarea-3">Label</label>
    <textarea id="default-textarea-3" class="f-flex" name="textarea-default">This is some sample text with a line</textarea>
</div>

Multi line with flex

<div class="c-textarea">
    <label class="c-label" for="default-textarea-6">Label</label>
    <textarea id="default-textarea-6" class="f-scroll f-flex" name="textarea-default" rows="4">This is some sample text with a very long string of text that wraps and has a total of four lines as well as a scroll bar</textarea>
</div>