Design system

Inputs

Twee smaken inputs

  • Ghost / verborgen veld. Standaard onzichtbaar — je ziet alleen het label en (indien ingevuld) de waarde. Hover geeft een subtiele vulling, focus opent het veld. Dit is het primaire veld op A4-papier.
  • Normaal veld. Altijd zichtbaar met border en achtergrond. 36px hoog, radius --radius-md. Gebruik in instellingen, modals en formulieren.
  • Gedeelde tokens. Beide varianten delen typografie, spacing en focus-ring (2px --accent-blue-glow + border --accent-blue). Fout = --danger border + hint-tekst.

1 · Ghost / verborgen veld

Hoofdveld op A4 papier. Rust = onzichtbaar. Hover = subtiele vulling. Focus = volle border + ring. Ingevuld + blur = alleen tekst.

Leeg (rust)
transparant·geen border·hover = surface-alt
Leeg + helptekst
placeholder italic·ink-400
Met waarde
alleen tekst·ink-900·500
Select (ghost)
zelfde gedrag·chevron on focus/hover

2 · Text input

Standaard tekstveld. Ook voor email, telefoon, nummers — type verandert, styling niet.

Default
36px·radius-md·border 1px·ink-700
Met hint
hint 12px·ink-500·onder input
Error
border danger·hint danger
Disabled
surface-alt·ink-400·not-allowed

3 · Textarea

Meerdere regels. Verticaal resizable, horizontaal niet.

Default
min 3 regels·resize vertical·line-height 1.5

4 · Select

Native select voor korte lijsten (≤ 10 opties). Voor grote lijsten: klant-picker / combobox.

Default
chevron 12px·padding 0 32px 0 12px

5 · Checkbox & Radio

Checkbox = meerkeuze / boolean. Radio = precies één keuze uit een groep.

Checkbox aan
16×16·accent-blue·vinkje wit
Checkbox uit
border 1.5px·radius 4
Radio (aan)
dot 8px·accent-blue
Radio (uit)
border 1.5px·cirkel

6 · Toggle switch

Voor instant on/off — instelling met direct effect. Niet gebruiken voor 'bevestigen' — dat is een checkbox.

Aan
track 36×20·accent-green·thumb wit
Uit
track ink-300·thumb links

8 · Filterbar

Vaste filter-component boven lijsten. Config-driven: één entry per filter in FILTER_DEFS. Chips staan links, '+ Filter' opent de picker, 'Alles wissen' rechts.

Filterbar — live demo
chips + picker + clear·multi-select · single-select · date · range·FilterBar
Filter-chip (actief)
.filter-chip.is-set·icoon magenta·value in pill·× om te verwijderen
+ Filter (dashed)
.filter-add__btn·dashed border ink-300·opent picker-menu

9 · Gebruik in code

Alle inputs delen dezelfde .ds-input wrapper — kies je control (input, textarea, select). Voor states: is-error, is-disabled.

<label className="ds-input">
  <span className="ds-input__label">Klantnaam</span>
  <input className="ds-input__control" placeholder="Bijv. Acme B.V." />
  <span className="ds-input__hint">Optionele helptekst.</span>
</label>

/* Error state */
<label className="ds-input is-error">
  <span className="ds-input__label">Postcode</span>
  <input className="ds-input__control" />
  <span className="ds-input__hint">Vul een geldige postcode in.</span>
</label>

/* Filterbar — config-driven */
const FILTER_DEFS = [
  { key: "status", label: "Status", icon: I.Check,
    kind: "multi-select", options: STATUSES,
    predicate: (item, v) => v.includes(item.status) },
  { key: "edited", label: "Bewerkt", icon: I.Calendar,
    kind: "single-select", options: ["Vandaag","Afgelopen week","Deze maand","Alles"],
    predicate: (item, v) => /* … */ true },
];

<FilterBar
  defs={FILTER_DEFS}
  active={filters}
  onChange={setFilters}
  allItems={items}
/>