Skip to main content

Input

Input is a foundational form element for collecting user data. It offers basic functionality and is ideal when you need full control over layout and validation - serving as a building block for higher-level components like TextField.

EDS 2.0 is in beta: safe to adopt alongside EDS 1. The API may still change in small ways before it ships as eds-core-react 3.0.0.
Version: EDS 2.0 (beta)

View in Storybook

When to Use​

Use Input when you need a basic input field without additional functionality, or when building custom fields and composite components where you want full control over error handling and layout.

Avoid Input when:

  • You need a complete form field with label, description, and validation message - use TextField instead
  • The field requires built-in accessibility features - use TextField which handles composition automatically
  • You need multi-line text entry - use TextArea instead

Guidelines​

Input Types​

Input supports a variety of native HTML input types for different data entry needs.

View in Storybook

Validation States​

Use the invalid prop to indicate validation errors. The input displays a red border and adornments inherit the error colour.

View in Storybook

Disabled & Read Only​

Avoid using disabled where possible. Consider using readOnly instead - it keeps the value visible and accessible while preventing edits.

  • Disabled: The input is non-interactive and visually dimmed
  • Read Only: The value is visible but not editable, maintaining better accessibility

View in Storybook

Required and Optional Indicators​

For a complete form field with label, description, helper message, and required/optional indicators, use the TextField component instead - it handles all the composition and accessibility for you.

The required prop tells assistive technology and native form validation that the field is required, but it shows no visible marker. Pair it with the indicator prop on Field.Label.

View in Storybook

Density​

Input supports two density modes to fit different UI contexts:

  • Spacious: The default density with comfortable padding
  • Comfortable: A more compact option for dense UIs like data tables

View in Storybook

Adornments​

Use startText and endText for prefix/suffix text (e.g., "$", "USD", "km"). These stay neutral in all states.

Use startAdornment and endAdornment for elements (icons, buttons) that should inherit state colours - turning red when invalid.

€
EUR
https://
.com
kg

View in Storybook

Accessibility​

When using Input without a visible label (e.g., in search fields or toolbars), you must provide an aria-label for accessibility.

While labels may be visually hidden in special cases (such as in tables), they must still be meaningful for screen readers using aria-label or aria-labelledby.

Keyboard support:

  • Tab: Move focus to and from the input
  • Type: Enter text when focused

For form fields with visible labels, use the TextField component instead - it handles accessibility automatically.

Do's and Don'ts​

Do
  • Use Input as a building block for custom compositions
  • Provide aria-label when no visible label is present
  • Use readOnly instead of disabled when the value should remain visible
  • Use TextField for standard form fields with labels
  • Place labels and descriptions above the input field
Don't
  • Use Input when TextField would provide needed functionality
  • Leave inputs without an accessible name (label or aria-label)
  • Overuse the disabled state - prefer readOnly when appropriate
  • Hide validation messages behind obscured elements