Input

Also known as

Text Field, Text Box

Similar to

Available since
@salt-ds/core@1.8.0

Resources

Support

Input provides an editable field where users can enter text and numeric values. It works best for short, freeform content and data entry.

Best practices

  • Wrap Input in FormField to provide the field with a visible label, help text and a status message for validation feedback. This will ensure it complies with accessibility guidelines. You can find more information in the W3C form instructions.
  • The component clips text that extends beyond its visible area. All states have the same behavior—default, read-only and disabled—whether or not the input has focus. To view the text in its entirety, the user can traverse the characters using the cursor.
Density
Mode

Empty read-only marker

For accessibility purposes, we recommend you use the emptyReadOnlyMarker prop to add a marker for empty read-only fields. This ensures it’s clear that a value is not necessary for the current selection or configuration.

Keyboard interactions

KeyFunction
Tab
  • If focus is above the input, Tab moves focus onto the input and highlights the text. If the input area is empty, Tab displays a text cursor in the input area.
  • If the input is disabled, Tab skips the input.
  • If the input has focus, Tab moves focus out of the input, to next focusable component in the tab order.
Shift + Tab

If focused, Shift + Tab moves focus out of the component to the previous component in the tab order.

Enter

If an interactive adornment, e.g., a button, has focus, Tab activates the element.

Space
  • When the input area has focus, Space inserts a character at the position of the text cursor.
  • If an interactive adornment, e.g., a button, has focus, Space activates the element.
Right Arrow

When the input area has focus:

  • If text is highlighted, the highlight is removed and the text cursor is positioned at the right edge of the highlight.
  • If the text cursor is displayed, it is positioned on the alternative side of the following character. If is there is no following character, there is no effect.
Left Arrow

When the input area has focus:

  • If text is in a highlighted state, Left Arrow removes the highlight and positions the text cursor at the left edge of the highlight.
  • If the text cursor is visible, Left Arrow positions it on the alternative side of the following character. If there's no preceding character, there's no effect.
Shift + Left Arrow / Shift + Right Arrow

Drags selection over text characters, one at a time.

Backspace

When the input area has focus and:

  • Text is highlighted, this action removes all highlighted characters.
  • The text cursor is positioned to the right of text, this action removes the preceding character.
Alphanumeric / Special keys

When the input area has focus, this action inserts the relevant character at the position of the text cursor.

Control + A / Command + A

This action highlights all strings within the field.

Previous Page

Icon

Next Page

Link