Component Text Area

Anatomy

1. Label: Describes the expected input.
2. Text input: Content the user enters.
3. Helper text: Provides additional context if needed.
4. Input container: Users input data here.
5. Character counter/limit: Shows the current number of characters used from the character limit.

Labels

• Each field needs a label, which should be clear, concise, and obvious to users what it’s asking for.
• Don’t use labels as helper text.
• Use sentence-case capitalization and consistent grammar and spelling.

Placeholder text

Placeholder text is an optional way to describe the expected input for a text area. Keep in mind:

• Placeholder text should be short and informative. Use sentence-style capitalization and an active voice.
• It’s not a substitute for a label.
• Placeholder text disappears once the user starts typing, so don’t use it to convey important information. Use helper text instead, if needed.
• Some screenreaders don’t read placeholder text aloud.

Helper text

• Use helper text to clarify requirements for filing out a field.
• Use error text to point out user mistakes. Error text should be specific enough to correct errors.
• Use sentence case, write full sentences, and use punctuation.
• Helper text will appear below a field, but error text will replace it if an error exists.

Required and optional

Not every text area needs to be filled out. In such a situation, there are ways to indicate when a field is optional.

By default, fields are not required and will display an “(optional)” label. It’s possible to manually override this behavior to display indicators for required fields instead. See the Code tab to learn more. A good rule of thumb:

• Don’t ask for unnecessary information. This prevents users from getting overwhelmed.
• If most of the form’s fields are required, mark only the optional fields.
• If most of the form’s fields are optional, mark only the required fields.

Tooltips

Add a tooltip by setting the tooltip attribute to the desired text. Use tooltips sparingly, and keep text brief and supplementary. Do not include interactive elements. The tooltip appears on hover or keyboard focus.

<som-textarea 
  label="How can we improve this app?" 
  tooltip="Your feedback won’t be shared publicly."
  required-ind="none" 
></som-textarea>

Behavior

States

• Default: The standard state of a text area.
• Hover: When the cursor moves over a text area field without clicking it.
• Focus/active: When a user focuses on a text area via keyboard interaction and/or when a user is typing in the field.
• Disabled: An unavailable action. Users shouldn’t be confused as to why a text area is disabled.
• Error: When a field fails validation,, an error message can display instructions on how to fix it.
  • Error messages are displayed below the input area, replacing helper text until fixed.
  • Real-time validation helps streamline the process and keeps data clean as the user fills out a form. Otherwise, validate the text area when the user submits the form.
• Read-only: Content in a text area that can be copied but not edited.

Modifiers

Character count

While optional, text areas can have character counts that show users the maximum allowable characters and how many they have used.

Interactions

Mouse

• Hovering over text areas changes the color and thickness of the input border.
• Clicking on the text area focuses on it so users can begin typing.
• Focus is lost when clicking away from the text area.

Keyboard focus

• Tab navigates to and focuses on the text area. Once the input is focused, users can type into the field.
• Enter submits a form.
• Arrow keys move the cursor around inside the text area.

How to use

Use a text area for:

• Long responses
• Free-form responses
• Responses without format validation
• Detailed feedback
• Descriptions

Text area or input?

Use an input instead of a text area if you want to:

• Collect specific information such as name, phone numbers, or emails.
• Request short answers that don’t require multiple lines.
• Limit the type of entries a field will accept. Inputs have a unique type attribute for common use cases that tells the browser how to render and validate input for that specific type.

Layout

Height

Developers can set a default height for a text area using the rows property. Text areas default to three rows high. Any text that goes over this limit overflows. Users can also drag the text area’s corners to resize it.

Width

Forms must be contained to no more than 768px wide (8 columns in a 1200px 12-col grid). The field widths should reflect the intended length of the content while still aligning to the grid columns.

Text areas should match the width of the established form grid and be as wide as the row they’re on, up to 768px. Other considerations:

• Don’t put multiple text areas on the same line, cutting their content.
• Text areas should fill their form container.
• While users can resize the height of a text area, they can’t control the width.
• The minimum recommended width is 360px on desktop and full width on mobile.
• The maximum recommended width for text areas is 768px.