Input

Input is a single-line text field. It's one of the basic components for all kinds of forms, search fields, etc.

Other input types for entering certain data:

• InputMask
• InputNumber
• InputPhone
• InputTags
• DatePicker
• TimePicker
• ColorPicker
• Checkbox
• Radio

The input has two sizes.

We recommend adding a visible text label to the input wherever possible. If the input is not required, be sure to mark it with the "optional" text label.

Addon is a slot inside the input field – to the left and right of the text – for placing icons, badges, counters, etc. Addon can be non-clickable and clickable.

• When adding an icon before the text (leading addon), use a non-clickable icon. This icon is usually colored to match the text or a different color based on the purpose it serves.
• When adding an addon after the text (trailing addon), you have various options such as a clickable icon, a counter, a badge, a spinner, an icon button, or a link. The clickable icon should have the --icon-secondary-neutral color. When hovering over it, the color should change to --icon-secondary-neutral-hover-active, and the cursor should change to a pointer.

When two addons are stacked together, their indents will be divided in half. This ensures that there is a sufficient clickable zone (touch target) around each addon.

Use read-only state for component that cannot be interacted with, except for copy its value. Also use it for links which might be copied.

Use disabled state if you need to show affect of one component to another.

For live examples of the input types, refer to Example tab.

The search input can have a non-clickable icon before the text and the icon for clearing the value after the text.

You can place Counter inside the input or next to its label. Counter usually shows the number of available characters, limits, etc. The counter is usually non-clickable.

Please do not use the Tag component for the counter. It has a different purpose and functionality.

1. Use input fields only for single-line information. If you need to enter a lot of data, use a Textarea instead.
2. Label the inputs clearly, so users can quickly understand what data needs to be entered.
3. Select an appropriate width for the input field based on the content to be entered. For example, if it's for a phone number, the input width shouldn't be wider than what is expected for a phone number.