Select
@/components/ui/Select
Felles nedtrekksvelger med samme høyde, kant og fokusoppførsel som Input — beholder semantikken til et nativt nedtrekksfelt.
Når brukes den
Et skjemafelt med mer enn fem-seks alternativer, eller der native mobil-oppførsel (systemets egen nedtrekksliste) er ønsket.
`size="sm"` (32px) KUN inne i en liste- eller tabellrad der 40px-feltet blir høyere enn raden rundt. `size="lg"` (48px) i store, luftige skjema. Ellers er `md` (40px, default) alltid riktig.
Ikke bruk til «velg én av 2-5 synlige alternativer» — det er PillTabs sin jobb (regel/velg-en-av-fa-ingen-radio: Select ELLER PillTabs, aldri en radio-gruppe).
Ingen rå nedtrekksfelt utenfor components/ui/ — bruk alltid denne (regel/ingen-raa-skjemaelementer).
Eksempler
Med etikett
Standard skjemabruk — etikett over feltet, samme mønster som Input.
<Select id="type" label="Boligtype"><option>Sameie</option><option>Borettslag</option></Select>
Med feilmelding
Rød kant og feiltekst under — samme signal som Input.
Velg en boligtype.
size="sm" i en listerad
Kompakt 32px-variant for et nedtrekk inne i en ListRow-trailing.
Uten etikett
Kun feltet, uten wrapper — for inline bruk der etiketten står ved siden av (f.eks. et filter i en verktøylinje).
size="lg"
48px/label-16 — samme tredje størrelse som Input/Textarea, for store, luftige skjema.
Deaktivert
Dempet flate og text-quaternary, ingen hover — som Input.
Props
Sveip tabellen for å se hele innholdet