Skip to main content

Combined input

Create an input that accepts several different values.

View in StorybookExternal link icon

Behavior​

  • Hovering over the component affects both of its input elements.

  • You can customize the width of both inputs to fit your needs.

Sizes​

Combined input comes in two sizes:

  • Size S – 32 px in height.
  • Size M – 40 px in height.

Combined input in size M is the default; you should use it in most cases.

Consider using Combined input in size S for Popovers and Modals with limited vertical space and when the surrounding components (Toolbar, Buttons, Selects, etc.) are in size S.

tip

For dense layouts, consider reducing the vertical spacing between input fields.

Accessibility​

Keyboard focus​

  • The keyboard focus state replicates the Combined input's active state and adds a 2px ring. If the input is filled, the focus will highlight the entered data within the component.
  • For the focus ring, use a colour from the Brand primary palette (default: Primary/500).
  • Ensure the focus state has a minimum contrast ratio of 3:1 against the background for accessibility compliance.

Keyboard interactions​

The input supports the common keyboard interactions, using the Tab key to select the element and using the Enter key to activate an in-focus element.

Resources​

Refer to Understanding 2.1.1 Keyboard for more information on expectations, intent, benefits, and techniques.