Input types
Search, date and time, color, file and range inputs, each with a look that fits the rest of the form.
Search
A search input is a pill with a magnifier at the start.
Date and time
In Chrome and Edge, the picker button of date, datetime-local, month and week gets a calendar icon, and time a clock. Firefox and Safari keep their own.
Color
File
The picker is a secondary button followed by the file name.
Range
The thumb turns primary while you use it, with an accent dot while you drag it. A color class changes the primary color.
Variables
| Variable | Default |
|---|---|
--i-input-search-border-radius | var(--i-border-radius-pill) |
--i-input-date-icon-size | 1rem |
--i-range-color-track | light-dark(#8790a3, #5f6880) |
--i-range-active-color-track | light-dark(#6f788c, #7b849a) |
--i-range-color-thumb | var(--i-color-secondary) |
--i-range-thumb-color-border | var(--i-color-background) |