Maturity
Overview
Types
🎖️ Text Area Field — preferred
The Text Area Field is a Field composition that wraps a Text Area Control. This is the preferred component as it has all the elements needed to make the control usable and accessible.
The following documentation speaks directly to the Text Area Control as the control is wrapped in Textarea Field. For more general information on the Field, check out the Field documentation.
⚠️ Text Area Control — use with caution
The Text Area Control is bare-bones and does not have a Label or Helper Text. You should only use this in rare situations where you add your custom Label or Helper Text (for example, the Open Question Block in the Runner).
Related components
Anatomy
Text Area control is the interactive area where the user can perform actions
Properties
|
Name |
Values |
Default |
|---|---|---|
|
Size |
MD SM |
MD |
|
Disabled Disables all interactions |
boolean |
False |
|
Read-only Disables interaction and focus and signifies it |
boolean |
False |
|
Empty |
boolean |
True |
|
Error Signifies the control is empty or with not allowed data |
boolean |
False |
|
Draggable Allows the control to be draggable |
boolean |
False |
|
Resize Allows the control to be resizable |
String |
- |
For the Field properties see the Field documentation.
How to use
For label and helper text usage, please go to the Field documentation.
Placeholder
A placeholder presents exemplary content that helps people enter accurate text.
Error text
Error text provides guidance on how to solve a problem that happened when entering text.
Related content
Behavior
For the Field behavior see the Field documentation.
States
The state of a component can depend on properties set before people can interact with it. We call them state properties. Differentiating them from the user-triggered states allows us to combine them, creating richer states that cover the whole interaction spectrum.
Related content
Default
Error
Read-only
When the property Read-only is true, users can not edit the control.
Read-only always displays values in an accessible way, so users can read them. Read-only control can be focused and hover but can’t be edited. Displays some visual signifiers, like a lock icon and neutral shades, that help the users to identify its status. Finally, read-only does not participate in the form validation.
Use this control status in cases where the user, for example, does not have the right to edit the content. If you need an empty control, use disabled Status.
Disabled
When the property Disabled is true, users can not edit the control. Disabled can display a value or an empty control and do not necessarily needs to pass accessibility standards. Disabled displays some visual signifiers, like a lock icon and neutral shades, that help the users to identify their status. Finally, disabled status does not participate in the form validation.
Draggable
When the property Draggable is true, the control shows an icon that signifies it can be draggable.
Width
For the Field width behavior see the Field documentation.
Full width
Textarea control fills the container where is displayed until they reach a limit, normally a spacing. This helps to make our form layouts more visually compensated with the rest of the elements.
Min-width
Text Area control has a 120px min-width. If the value added on the control exceeds the width size, it breaks into different lines.
Height
Min-height
Text Area shows by default a bigger interactive area than the Text Input. The reason is to provide the users with the affordance that they can add multiple lines of text. In order to do so, the control is built in with a minimum height value.
Resize
Users are able to customize the size of the control by dragging the resize icon, always under the width and height limits provided before. When hovering the resize icon target area, arrow cursor shows up, allowing resizing.
Quality checklist
This component passes the following requirements described in our Component lifecycle:
Maturity
RC
α · Design tokens
It uses Ariane design tokens.
α · Official assets
It uses the official Ariane assets (e.g., icons and illustrations) in one of the official sizes.
α · Accessible use of color
Its color contrast ratio is at least 4.5:1 for text and interactive areas.
α · Target areas
Its interactive target areas are large enough for users to accurately select them, following the Fitts law.
α · Naming agreement
Its name is agreed upon and shared between design and development.
α · Responsive L1
Is responsive to different viewport sizes.
α · User-triggered states
If the component is interactive, all its possible user-triggered interactive states are defined.
β · Responsive L2
The responsive behavior has been reviewed and validated by the team.
β · State properties
All the possible state attributes are defined.
β · Docs L1
It has essential documentation with at least primary usage.
β · Use cases
All the uses are audited and refined.
RC · Definition agreement
Its naming and properties are audited and aligned in design and code.
RC · Accessible L1
Its accessibility is manually audited, and any significant issues are fixed.
RC · Docs L2
The documentation covers the most common use cases and is expected to be iterated during the Release Candidate phase.
RC · Storybook
Includes a Storybook playground of the component.
Stable · Stable API
The component and its API remain stable, with no breaking changes for at least one month.
Stable · Adaptive
Supports adaptive design via preference queries.
Stable · Docs L3
Detailed documentation exists for design, content, accessibility, and implementation, including do’s and dont’s.
Stable · Tooling
Tooling (such as linters, codemods, etc.) exists to help with migrations and prevent further use of alternatives.