Input
An input is a field that allows a user to enter and interact with text and numeric values.
Code documentation
Anatomy
The input component is made up of 13 elements.

- Label
- Optional indicator
- Right slot
- Counter
- Clear button
- Value
- Left slot
- Helper text
- Required indicator
- Current value length
- Max value length
- Counter divider
- 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 describe the type of input required, such as a date picker, or as a touch target to trigger nested components. When the slot is hidden, the input text expands to fill the available space.

When interactivity is required, a button should be used within the slot. This ensures the appropriate interactions are automatically enabled and affords a focus area for easy keyboard navigation. Consider using small, tertiary, icon-only buttons for consistency and to compliment the rest of the input elements.

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.
Character count
A character counter can be displayed to provide feedback on character limitations for the input field as well how many characters are currently within the field.

If a max length isn't provided, only the current character count is displayed.

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 and hyperlinked content such as email addresses, URLs, and telephone numbers are still interactive. They are also part of the tab order and can receive focus.

Figma
Creating new input types
The base input includes all of the functionality that is commonly found across various input types and is used to build out the other input types found within the system. If additional input types are needed, you can use the base input as a starting point and customize as needed.
Icon versus button
The left and right slots are primarily designed to accommodate icon and button components. Icons should be used in situations that are purely informative. For situations where interactivity is needed, an icon-only button should be used. When using a button, use element/jh-input-button which is included alongside jh-input. This is sized to appropriately fit within the input and represents how buttons will render in the input code.
Persisting slotted content
When switching input types, slotted icons and buttons may persist and override default content. For example, the default magnifying glass icon within the left slot of a search input will override the left slot of a different input type. To fix this, you can either drill down to the affected layer and reset it to the component defaults or ensure you’re starting with the correct input type.