--- meta: title: Input description: Inputs collect data from the user. layout: component unusedProperties: | - Size `small` - Booleans `pill` --- ## Examples ### Basic Input with Label Use the `label` attribute to give the input an accessible label. ```html:preview ``` :::tip This component works with standard `
` elements. Please refer to the section on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation. ::: ### Help Text Add descriptive help text to an input with the `help-text` attribute. For help text that contains HTML, use the `help-text` slot instead. ```html:preview
List full names, separated by a semicolon
 ``` ### Label with Tooltip Use the `label-tooltip` attribute to add text that appears in a tooltip triggered by an info icon next to the label. :::tip **Usage:** Use a **label tooltip** to provide helpful but non-essential instructions or examples to guide people when filling in the input. Use **help text** to communicate instructions or requirements for filling in the input without errors. ::: ```html:preview ``` ### Label with Context Note Use the `context-note` attribute to add text that provides additional context or reference. For text that contains HTML, use the `context-note` slot. **Note:** On small screens the context note will wrap below the label if there isn't enough room next to the label. :::tip **Usage:** Use a **context note** to provide secondary contextual data, especially dynamic data, that would help people when filling in the input. Use **help text** to communicate instructions or requirements for filling in the input without errors. ::: ```html:preview
$10,000.29 available
 ``` ### Placeholders Use the `placeholder` attribute to add a placeholder. ```html:preview ``` ### Clearable Add the `clearable` attribute to add a clear button when the input has content. ```html:preview ``` ### Toggle Password Add the `password-toggle` attribute to add a toggle button that will show the password when activated. ```html:preview ``` ### Disabled Use the `disabled` attribute to disable an input. ```html:preview ``` ### Sizes Use the `size` attribute to change an input's size. Size `medium` is the input's default. ```html:preview

``` ### Pill Use the `pill` attribute to give inputs rounded edges. :::warning **Note:** Pill inputs are not a standard input pattern in our Design System ::: ```html:preview
``` ### Input Types The `type` attribute controls the type of input the browser renders. As shown in the examples below, some input types have default prefix and suffix elements. Not all available types are shown below. See the [Properties table](#properties) for the full list of options. #### Color Input The color input type displays a clickable color swatch on the left that opens the browser's native color picker. The color value is shown as editable text in the input field, allowing users to either pick a color visually or enter a color value directly. Use the `color-format` attribute to specify the format: `hex` (default), `rgb`, or `oklch`. ```html:preview
Default format. Click the swatch to pick a color, or type a hex value like #3b82f6.
Type RGB values like rgb(139, 92, 246). The picker converts to/from hex automatically.
Type OKLCH values like oklch(0.628 0.225 292.6). The picker converts to/from hex automatically.
Use the clearable attribute to allow clearing the color value.
``` #### Other Input Types ```html:preview
Has $ prefix and USD suffix by default and native input type set to number. The currency input does NOT have input masking at this time.

Has no icon by default
Use the optional-icon attribute to display the default optional icon for email inputs

Has no icon by default
Use the optional-icon attribute to display the default optional icon for phone number inputs


Use the no-spin-buttons attribute to hide the browser's default increment/decrement buttons for number inputs
Has a search icon by default. Use the clearable attribute to make the input clearable
``` ### Min Max Validation ```html:preview
``` ### Prefix & Suffix Icons Several input types have specific `prefix` and `suffix` elements or icons that are displayed by default. You can also use the `prefix` and `suffix` slots to add icons or text elements for other use cases. Follow these general guidelines when adding prefix and suffix icons to the input: - Use the `zn-icon` component - In general **don't** resize icons or change their color from the default already set by the `zn-input` component :::warning **Note:** If you find your use case requires a different size or color from the default, bring it up to the Design Team so that we can consider whether the pattern needs to be updated. ::: :::warning **Note:** `ts_form_for` doesn't support slots. Prefix and suffix icons cannot be added when rendering `zn-input` with `ts_form_for`. However, the `optional-icon` attribute can be set to `true` to display default icons for input types `currency`, `email`, `tel`, and `search`. ::: ```html:preview

``` ### Prefix Submit Button Use the `type="submit"` attribute to create a submit button as a Suffix to the input. This is useful for search inputs. ```html:preview Search ``` Or as a Prefix ```html:preview Search ``` ### Form Navigation with Enter Key Add the `data-enter-navigation` attribute to a form to enable Enter key navigation through form inputs. When enabled, pressing Enter will move focus to the next input field, and submit the form when all named fields are filled and valid. :::tip **Usage:** This feature is useful for forms where users naturally want to press Enter to move between fields, such as data entry forms, registration forms, or checkout flows. ::: #### Basic Example ```html:preview



Submit
``` #### All Input Types Example This example demonstrates Enter key navigation with various input types including text, email, phone, number, currency, and date inputs: ```html:preview







Continue
``` **Navigation flow:** Press Enter to move through each field. The form submits when all named fields are filled and valid. #### Mixed Form Controls Form navigation works with all Zinc form controls including selects, radios, checkboxes, toggles, and textareas. Textareas are excluded from navigation since they need Enter for their own functionality. ```html:preview




Electronics Clothing Books Home & Garden
New Used Refurbished

Feature this product

Available for purchase


Add Product
``` **Navigation behavior by control type:** - **Text inputs:** Enter moves to next field - **Number/Currency inputs:** Enter moves to next field - **Datepicker:** Enter moves to next field - **Select dropdowns:** Automatically opens when navigated to. Enter on an option selects it and moves to next field. - **Radio buttons:** Arrow keys select different options within the radio group. Space or Enter selects the current option. Press Enter to move to next field. - **Checkboxes:** Space toggles the checkbox. Enter, Arrow Down, or Arrow Up moves to next/previous field. - **Toggles:** Space toggles the toggle. Enter, Arrow Down, or Arrow Up moves to next/previous field. - **Textareas:** You can navigate TO a textarea with Enter, but pressing Enter inside a textarea adds newlines. Use Tab to navigate away from textareas. - **Search inputs:** You can navigate TO a search input with Enter, but pressing Enter inside a search input triggers search. Use Tab to navigate away from search inputs. **Keyboard shortcuts:** - **Enter** - Move to next field (or submit form if all fields complete) - **Arrow Down/Up** - On checkboxes and toggles, moves to next/previous field. On radios, selects next/previous option in group. - **Space** - Toggle checkboxes and toggles. Select current radio option. - **Tab** - Standard browser tab navigation :::warning **Note:** While you can navigate TO textareas and search inputs using Enter, pressing Enter while inside these controls uses the Enter key for their own functionality (new lines and search triggers, respectively). Use Tab to navigate away from these controls. ::: ### Customizing Label Position Use [CSS parts](#css-parts) to customize the way form controls are drawn. This example uses CSS grid to position the label to the left of the control, but the possible orientations are nearly endless. The same technique works for inputs, textareas, radio groups, and similar form controls. ```html:preview ```