Text field

v4.0.0

Text fields let users enter and submit text.

  • Skin
  • CoreUI
  • React
Stylized artwork of a text field.

Considerations

Performant

Forms allow users to complete fields effortlessly.

Accessible

Anyone, no matter their abilities, can complete forms.

Dynamic

Forms provide dynamic feedback so users can correct errors quickly and confidently.

Anatomy

A text field diagram is shown with 8 elements numbered: 1. Label, 2. Lead icon, 3. Helper text, 4. Prefix, 5. Value, 6. Container, 7. Suffix, 8. Trailing icon.
  1. Label
  2. Lead icon
  3. Helper text
  4. Prefix
  5. Value
  6. Container
  7. Suffix
  8. Trailing icon

Properties

Label

A label is required for text fields and succinctly describes the field’s purpose. A label is included for all fields by default. If another text element is acting as the label, like a section title, then the label can be visually hidden.

Two text fields. A text field with a label built into the component sits above a text field with a section title for a label.

Layout

There are two layouts available for texty fields, stacked and floating. Stacked labels are above the field and floating labels are inside the field. A floating label animates upward on focus to make room for the value.

Two text fields. A text field with a label above the text field container sits above a text field with the label inside of the text field container.

Placeholder content

Placeholder text is optional and remains visible until one or more characters are entered.

Because the placeholder text disappears, putting instructions or requirements as placeholder text is not accessible. Helper text is the preferred method to convey this information.

Three text fields. The first and last text fields have values entered, and the middle one has placeholder text.

Helper text

Helper text is placed below the field and informs the user of any requirements or disclaimers. Helper text can be shown persistently or on focus.

Helper text will be replaced with an error message if an error occurs.

A text field with placeholder text.

Character count

A character counter will appear when there is a limit on the number of characters. The counter updates in real-time as the characters are added or removed.

A text field with character counts.

Size

There is a small and large size available for text fields. The default is large and is recommended for smaller screens. Avoid mixing different sizes in a form.

Two text fields. A text field with a 40px height sits above a text field with a 48px height.

Prefix

Static text or symbols can be prepended to the input. The prefix clarifies the expected input and removes the need for users to manually enter them. These are useful for values like currency.

A ‘Price’ text field with a ‘$’ prefix.

Suffix

Static text or symbols can be appended to the input. The suffix, or postfix, clarifies the expected input and removes the need for users to manually enter them. These are useful for entering values like dimensions and weight or currencies that use trailing symbols.

Two text fields. A ‘Height’ text field with a ‘centimeter’ suffix sit above a ‘Weight’ text field with a ‘kilogram’ suffix.

Behavior

Input formatting

Input formatting clarifies expectations and formats the input to be easier to read. Slashes, dashes, and spaces are automatically added to the input as the user enters characters.

Two text fields. A ‘Credit card’ text field with pre-determined formatting sits above a ‘Social Security Number’ text field with pre-determined formatting.

Overflow

Text field values overflow left and right. While focused, the content will shift to keep the cursor in view as the user enters characters. When the field loses focus, the content will scroll to the beginning. Focusing on the field again returns the user to the end of the content.

Generally, text fields should avoid overflow. Use a Text area field if the value of a field is expected to be longer than a short sentence.

Text fields with both stacked and floating examples showing text overflow on both sides.

Active

The active state is triggered whenever the user interacts with the field. While active, the background color is removed and the border becomes strong.

A form field in the focused state.

Error messages

When a field fails validation, the helper text produces an error message to help the user successfully fulfill the input requirements. Error messages are concise and direct, and replace any previously visible helper text. An error icon is prepended to the helper text to enhance discoverability.

Two ‘Zip code’ text fields  - one label sitting inside the text field container, and one sitting above - with an error message.

Read-only

Users cannot focus on or change read-only fields. Their input is derived from other parts of the UI and is intended to be viewable for reference. The input is submitted with the form.

A text field that is read-only.

Disabled

Users cannot focus on or change disabled fields. Their availability depends on certain requirements. No value will be submitted from disabled fields.

A text field in the disabled state.

Clearing input

The clear button appears by default as a trailing icon while the field is focused and has one or more characters entered.

Two ‘Street address’ text fields  - one label sitting inside the text field container, and one sitting above - with a clear icon trailing button.

Screen sizes

Small

Text fields span the full width of the screen on compact screens.

Text fields sit on a ‘Shipping address’ form on the eBay mobile app. The text fields span the full width on compact screens.

Medium and large

Text fields are aligned to the grid up to their max width on larger screens. Avoid allowing text fields to span the entire width of the page on large screens.

Text fields sit on an eBay account page on a larger screen. The text fields span full width to the right of a menu panel.

Specs

A text field is shown with specs. The padding on the left and right of the text field container is 16px. The space between the label and container is 4px. The space between the container and helper text is 8px.

Change log

VersionDateNotes
4.0.0
Sep, 2024
  • Updated to eBay Evo
  • Bumped to 4.0 for individual versioning
3.1.3
Apr, 2023
  • Fixed disabled and read-only states of text area
  • Fixed border color of text area enabled state
  • Fixed helper text links
3.1.2
Apr, 2023
  • Fixed state layer placement
  • Removed baked-in interactions from the field layer
3.1.1
Mar, 2023
  • Fixed a label duplication glitch in the stacked text field layout component
3.1.0
Mar, 2023
  • Moved the error icon in invalid states to the leading element of the helper text
  • Added state layer to text field box to handle hover and pressed states
  • Renamed property for label location to label layout
  • Renamed values for label layout to stacked and floating
  • Simplified boolean property names
  • Renamed “Input” layers and properties to “Value”
  • Updated helper text subcomponent to include error state property
  • Increased spacing below field from 4px to 8px
  • Updated read-only state to normal field styling with “read-only” helper text visible
3.0.0
Jun, 2022
  • The 3.0 update affects the Figma component’s functionality, there are no visual or behavioral changes to the coded component.
  • Updated each field type to use new component properties feature:
  • Text property types for label, input, assistive text, and character count layers.
  • Boolean property types for helper content, supporting icon, character count, and assistive text layers.
  • Instance swap property for supporting icon (when enabled).
  • Added prefix and suffix as a property of the text field component instead of separate components.
  • Updated each field type to use new state-layer pattern.
  • Renamed “Empty” boolean property to “Populated.”
  • “Populated” property toggles the input text layer and the size and location of the label layer.
2.2.0
Feb, 2022
  • Increased contrast of form field border