IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

AvatarsIconUiExpandCollapseDown
ButtonsIconUiExpandCollapseDown
Data VisualizationIconUiExpandCollapseDown
DialogsIconUiExpandCollapseDown
IconsIconUiExpandCollapseDown
ModulesIconUiExpandCollapseDown
NotificationsIconUiExpandCollapseDown
ThemesIconUiExpandCollapseDown
TypeIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Text Area

/

Design

Let users enter multiple lines of text.

When you expect a large amount of text, perhaps in response to an open-ended question, qualitative feedback or notes on a game, opt for the text area over an input.

IconWarning
Version 5+
If using Uniform Version 5 or later, please refer to our Storybook docs for the Text Area documentation and examples.

Size

An text area can be any of the four available sizes.

IconCriticalMax. 500 words

X-small: Only use this when you really need to squeeze, like in a sidebar.

A form’s density (standard, compact) is dictated by the form modifier component. Check those guidelines for more detailed recommendations.

State

A text area’s state depends on the interaction itself or a submission error.

IconCriticalMax. 500 words

Default: The actual focus state is sorted for you, so anyone navigating via keyboard or screen reader is set.

Usage

Labels

Labels are mandatory on all fields, but they don’t always have to be visible. Even hidden labels make a difference in accessibility.

Labels should always appear left-aligned above the field. They should provide enough direction that no placeholder copy is needed.

Layout

Forms support multi-column layouts. Be cognizant of related fields and how they are typically represented. When in doubt, limit to one column.

Disabled States

An alternative to disabled states is conditionally displaying the field until it becomes relevant. It reduces cognitive load and creates a much clearer path to completing the form—especially as fields change with preceding selections.

Microcopy

Labels

A label should clearly and concisely describe the field’s purpose with no more than a few words.

Don't make the label a complete sentence telling the user what to do.

Don'tmake the label a complete sentence telling the user what to do.

Do name exactly what belongs in that field.

Doname exactly what belongs in that field.

Check UI label guidelines for more detail on case and punctuation.

For required fields, place an asterisk at the end of the label. There’s no need to spell out required and extend the length of that label.

Placeholders

Placeholders are suggested but not always necessary. They shouldn’t repeat the label outright or insert the label into a CTA (e.g., “Enter your email address”).

Don't repeat the label for the sake of having a placeholder.

Don'trepeat the label for the sake of having a placeholder.

Do provide more instruction with a sample entry.

Doprovide more instruction with a sample entry.

They can provide an example or preferred format of the content we’re looking for, like a date or phone number.

Placeholders should follow non-label text guidelines, but don’t put punctuation on the end.

Help Text

Help text can provide details not included in the label or placeholder, like certain criteria to meet for a valid submission.

Don't use the help text to provide a sample entry.

Don'tuse the help text to provide a sample entry.

Do explain what restrictions might exist in that field.

Doexplain what restrictions might exist in that field.

In the case of an error, the help text should be updated explaining why an error occurred and how it’s fixed.

Don't allow errors without displaying help text.

Don'tallow errors without displaying help text.

Do use help text to explain why an error occurred and how it's fixed.

Douse help text to explain why an error occurred and how it's fixed.

Accessibility

Audit Results

See our full accessibility audit for more information about these results.

PlatformVisualInteractiveAutomatedDetails
ReactIconCritical ViolationIconConfirmation PassIconWarning Warning
  • IconCriticalForm element placeholder text color does not meet 4.5:1 color contrast ratio.
  • IconWarningARIA attribute element ID does not exist for aria-describedby (Storybook)
React NativeIconCritical ViolationIconConfirmation PassIconWarning N/A
  • IconCriticalForm element placeholder text color does not meet 4.5:1 color contrast ratio.

Platform

platformnotes
Web
  • Stick to the guidelines above.
Apple
  • Stick to the guidelines above.
Android
  • Stick to the guidelines above.