Input - Search
A search input is a single-line text field with iconography and behaviors to support search functionality.
Code documentation
Anatomy
The input component is made up of 13 elements.

- Label
- Optional indicator
- Right slot
- Clear button
- Value
- Left slot
- Helper text
- Required indicator
- Error text
Variants
Size
The size of the input can be adjusted to accommodate a variety of space constraints. These sizes use fixed dimensions to guarantee that the height doesn't grow based on the content of the input field. This ensures that all form elements of the same size compliment and predictably align with each other.
Small
Small inputs are used to reduce the overall height of the input field. They are recommended for forms with a high number of inputs or contexts that require more conservative vertical spacing.

Medium
Medium inputs are the default size.

Large
Large inputs are recommended for forms with a relatively limited number of inputs or to improve touch triggering.

Label
Every input should have a label that describes the purpose of the input in a concise and clear manner. Built-in labels can be omitted if an adjacent label is included that adequately describes the purpose of the input and is correctly referenced to the field for accessibility purposes.

Label text that is longer than the available space wraps to a new line.

Indicator
Inputs can be marked as either required or optional which triggers relevant validation on the form. The indicator is a preset and styled element within the component, not manually entered as part of the label string.
Required form elements are used when the majority of the form elements are optional, but a few need to be marked as required.

Optional form elements are used when the majority of the form elements are required, but a few elements need to be marked as optional.

Helper text
Helper text is used to convey additional information about the input such as format requirements.

Helper text wraps to a new line when it's too long for the available horizontal space.

Left slot
A left slot is available for an icon to visually describe the input as a search input. A default icon is supplied, but can be overridden with a custom icon if required. When the slot is hidden, the input text expands to fill the available space.

Value
Values that are longer than the input are handled using the behavior of native HTML inputs where the text is cropped by the interior boundaries of the input when it is not active. When the user activates the input, the full value becomes available and can be accessible via keyboard navigation or selection.

Because of the accessibility issues that can result, placeholder text is not supported. When examples or additional instructions are needed, consider using the input's helper text or other supplemental text within the surrounding content.
Clear button
A clear button can be enabled to allow users a way to quickly remove a value from the input field. When enabled, the button remains hidden until a value is entered into the input field and then persistently displays until the user clears the value. While the icon and button styling can be customized, the button itself is a persistent part of the input functionality and therefore cannot be customized.

The clear button always precedes the right slot.

Right slot
The right slot can accommodate an icon to further describe the type of input required.

The right slot can also accommodate a button when a micro interaction is required within the input. Consider using small, tertiary, icon-only buttons for consistency and to compliment the rest of the input elements.

When the slot is hidden, the input text expands to fill the available space.
Behavior
States
Inputs have five available base states:
- Enabled
- Focus
- Hover
- Active
- Disabled

Invalid
Inputs can be set to invalid to indicate that a value needs to be entered or that the entered value is invalid. Error text is always displayed as part of the invalid state to allow for a generic error message or provide specific guidance as to what needs to be fixed. It is also displayed in addition to any helper text that is present and below the input field.

Error text wraps to a new line when it's too long for the available horizontal space.

Read-only
Inputs may be set to read-only for when form values need to be shown but shouldn’t be edited. Read-only content may still be copied by the user. They are also part of the tab order and can receive focus.

Figma
See the notes for base input for guidance on how to work with common input elements.