An input field lets the user enter free text, numbers or search terms. It can have a label, a left icon, right-hand action icons and a message that explains or validates the value.
How to add an input field to a page. The file is components/css/input.css.
Link the shared stylesheet once per page, and add the keyboard script. Never copy the rules into a page.
| Step | What to do |
|---|---|
| 1. Link | <link rel="stylesheet" href="/components/css/input.css">. Both templates already have it. |
| 2. Markup | A form-field with a label, an input-wrap around an input-box holding the input, and an optional form-helper message. |
| 3. Size | Large is the default. Add input-box--sm and form-label--sm for Small, input-box--xs for XSmall (desktop only). |
| 4. Keyboard focus | Add the script under CSS / Tailwind once per page. Without it the ring never shows on keyboard focus. |
Copy the markup you need. Hover and focus come from :hover and keyboard focus; the [data-state] selectors in the CSS exist only so the documentation can force a state.
| Class | Use |
|---|---|
form-field | The column: label, wrapper, message. |
form-label, form-label--sm | The label. --sm for Small and XSmall. |
input-wrap | The wrapper that draws the focus ring. |
input-box, --sm, --xs | The box. Large, Small, XSmall. |
input-box--error, --success | Red or green border. |
form-input | The native input. |
input-icon, --lg, --fill | A Material Symbols icon. --lg is 24px, --fill is the filled clear icon. |
input-actions, __btn, __clear, __divider | The right-hand icons. |
form-helper, --error, --success, --disabled | The message. |
:placeholder-shown. The placeholder is therefore required, even if it is a single space.:placeholder-shown.btn--md, Small → btn--sm, XSmall → btn--xs.input-box--sm).[data-state] selectors do nothing outside the documentation pages.The component is one CSS file, shared by every page. Link it, never copy it. The CSS below is read from the file the page links, so it is always what you see.