Text fields are essential elements in user interfaces, providing marketers with the means to input and edit text data.
Design
Structure
Input Container: The primary area where marketers can type or edit text.
Label: Descriptive text above the input area that specifies the information marketers should enter.
Placeholder Text: Light, guiding text within the input area that suggests what to input, disappearing once typing begins.
Icon (optional): An icon inside the input field can indicate the field's purpose (e.g., a search icon for search fields).
Description: Additional information below the label offering guidance or displaying validation messages (errors or success).
Support text (conditional): Additional information below the label displaying validation messages (errors or success).
Variants
Standard: A basic text field for single-line input.
With Icon: Includes an icon to indicate the field's function or to provide additional interaction (e.g., visibility toggle for password fields).
Additional properties
Sizes (height)
There are 3 height variations for text field. In most cases, the default size (Large) should be used. Additional sizes can be used when there is limited space, or the elements nearby use a smaller height than the default text field.
Small (32px)
Medium (36px)
Large (40px; default)
🟢 Text field / Size=Large, State=Inactive, is Horizontal=False, Placeholder=True
🟢 Text field / Size=Medium, State=Inactive, is Horizontal=False, Placeholder=True
🟢 Text field / Size=Small, State=Inactive, is Horizontal=False, Placeholder=True
States
Default: The regular appearance when not interacted with.
Focus: When the field is active, typically highlighted with a border color to indicate it's ready for input.
Hover: Indicates when a user's pointer is over the field.
Disabled: Appears faded to show the field is not interactive.
Error: Highlighted, usually with a red border, to indicate a problem with the entered text.
🟢 Text field / Size=Large, State=Inactive, is Horizontal=False, Placeholder=True
🟢 Text field / Size=Large, State=Error, is Horizontal=False, Placeholder=True
🟢 Text field / Size=Large, State=Disabled, is Horizontal=False, Placeholder=True
🟢 Text field / Size=Large, State=Hover, is Horizontal=False, Placeholder=True
🟢 Text field / Size=Large, State=Focused, is Horizontal=False, Placeholder=True
Guidelines
Use cases
Collecting short-form data such as names, email addresses, or search queries.
Enabling marketers to filter data or execute searches within applications.
Gathering credentials like usernames and passwords.
Do
Use clear, concise labels to indicate the type of information marketers should enter.
Implement placeholder text to provide examples or further guidance, enhancing usability.
Ensure text fields are of an appropriate size—they should be the relative height/size of the components next to them
Provide immediate validation feedback to help marketers correct errors in real-time.
Don't
Avoid using text fields for long-form input; consider text areas for extensive text.
Don't clutter the UI with excessive text fields; group related fields logically to streamline data entry.
Refrain from using overly complex validation rules that could confuse marketers.
Content
Labels and placeholder text should be written in clear, understandable language suitable for marketers of all levels.
Helper text should offer actionable advice, such as format requirements for input data.
Validation messages must be specific, guiding marketers to correct errors efficiently.
Accessibility
Keyboard Navigation: Ensure text fields are navigable with the keyboard, following logical tab orders.
Screen Reader Support: Use label tags and ARIA attributes to describe each field's purpose, ensuring screen readers can accurately convey this information to marketers.
Contrast and Visibility: Adhere to WCAG guidelines for text and background contrast, ensuring text fields and their components are easily distinguishable and legible.
Error Identification: Provide accessible error identification, using both color and text descriptions to signify and explain errors.
Health
Is documented
The component is fully documented
Accessibile
Tested against WCAG 2.1 AAA accessibility guidelines
Tokens
This component uses tokens in both Figma and code
Figma component
Includes a link to a Figma component that has been imported to Supernova