A select lets the user choose one option from a list. It looks and behaves like an input field, with a dropdown arrow. It opens the ECO Menu as its list.
How to add a select to a page. The files are components/css/select.css, components/css/menu.css and components/js/select-menu.js.
Link the shared files once per page. Never copy the rules into a page.
| Step | What to do |
|---|---|
| 1. Link | select.css and menu.css in /components/css/, and /components/js/select-menu.js. Both templates already have them. |
| 2. Markup | A form-field with a label, an input-wrap around a native select.form-select and the form-select-arrow span, and an optional form-helper message. |
| 3. Placeholder | Start the options with <option value="" disabled selected hidden>. |
| 4. Size | Large is the default. Add form-select--sm and form-label--sm for Small, form-select--xs for XSmall (desktop only). |
| 5. Keyboard focus | Add the keyboard script under CSS / Tailwind once per page. |
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, form-label, form-label--sm | The column and the label. |
input-wrap | The wrapper: focus ring, arrow and open menu. |
form-select, --sm, --xs | The select. Large, Small, XSmall. |
form-select--error, --success | Red or green border. |
form-select-arrow | The arrow icon, after the select inside the wrapper. |
form-helper, --error, --success, --disabled, form-helper-icon | The message. |
select-menu.js opens the ECO Menu instead of the browser list. The select stays the form control: its value, label and disabled state do not change.:has(), so no script is needed.select-menu.js the select works with the browser’s own list.[data-state] selectors do nothing outside the documentation pages.The component is two CSS files and one script, shared by every page. Link them, never copy them. The code below is read from the files the page links, so it is always what you see.