Components
Fields
Every field shares the dashboard's frosted-chip look: 38px tall, 12px corners, brighter when focused. Labels sit above; a field's own problem is written right under it.
Text
Plain, search (with clear), password (with show), and amounts with a € prefix.
Type to search
At least 8 characters
€
Longer text
Grows with what you write; shows a live count when there is a limit.
0/240
Select
Two looks: the filter chip from the dashboard, and a full form field. Type a letter to jump.
Chosen: All accounts
Arrow keys move between days
Choices
Checkbox for things you confirm with Save. Switch for things that take effect immediately. Radio when exactly one applies.
Slider
A whole form
Press “Add client” with empty fields: each problem appears under its own field and focus jumps to the first one. Fill it in and it saves.
Props
| Prop | Values | Default | What it does |
|---|---|---|---|
Input type | 'text' | 'search' | 'password' | 'email' | 'number' | 'text' | search adds a clear button; password adds show/hide |
label / hint / error | string | — | Label above; hint or error below (error wins and is announced) |
icon / prefix / suffix | icon name · text | — | Leading icon, or text like € and m² |
Select look | 'chip' | 'field' | 'chip' | Filter chip or full-width form field |
Select options | string[] | { value, label, hint?, icon? }[] | — | Choices; hint shows under the label |
DatePicker value | Date | null | null | Weeks start on Monday; min/max block days |
Slider format | (v) => string | v => v | How the value reads (and is announced) |