Select

Kildekode på GitHub · Les som Markdown

Select er en tilgjengelig nedtrekksmeny som erstatter native <select> med full kontroll over utseende og oppførsel. Bygget på Radix UI Select med tastaturnavigasjon, typeahead-søk og automatisk posisjonering.

Importering

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  SelectGroup,
  SelectLabel,
  SelectSeparator,
} from "@kilden/designsystem";

Grunnleggende bruk

<Select>
<SelectTrigger className="w-[200px]">
  <SelectValue placeholder="Velg et alternativ" />
</SelectTrigger>
<SelectContent>
  <SelectItem value="react">React</SelectItem>
  <SelectItem value="vue">Vue</SelectItem>
  <SelectItem value="svelte">Svelte</SelectItem>
  <SelectItem value="angular">Angular</SelectItem>
</SelectContent>
</Select>

Med label

<div style={{ display: "grid", gap: "0.5rem", maxWidth: "16rem" }}>
<Label htmlFor="framework">Rammeverk</Label>
<Select>
  <SelectTrigger id="framework">
    <SelectValue placeholder="Velg rammeverk" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="react">React</SelectItem>
    <SelectItem value="vue">Vue</SelectItem>
    <SelectItem value="svelte">Svelte</SelectItem>
  </SelectContent>
</Select>
</div>

Med grupper

Bruk SelectGroup og SelectLabel for å organisere alternativer i grupper.

<Select>
<SelectTrigger className="w-[240px]">
  <SelectValue placeholder="Velg teknologi" />
</SelectTrigger>
<SelectContent>
  <SelectGroup>
    <SelectLabel>Frontend</SelectLabel>
    <SelectItem value="react">React</SelectItem>
    <SelectItem value="vue">Vue</SelectItem>
    <SelectItem value="svelte">Svelte</SelectItem>
  </SelectGroup>
  <SelectSeparator />
  <SelectGroup>
    <SelectLabel>Backend</SelectLabel>
    <SelectItem value="node">Node.js</SelectItem>
    <SelectItem value="kotlin">Kotlin</SelectItem>
    <SelectItem value="python">Python</SelectItem>
  </SelectGroup>
</SelectContent>
</Select>

Deaktiverte alternativer

Individuelle alternativer kan deaktiveres med disabled.

<Select>
<SelectTrigger className="w-[200px]">
  <SelectValue placeholder="Velg plan" />
</SelectTrigger>
<SelectContent>
  <SelectItem value="free">Gratis</SelectItem>
  <SelectItem value="pro">Pro</SelectItem>
  <SelectItem value="enterprise" disabled>Enterprise (kommer snart)</SelectItem>
</SelectContent>
</Select>

Bruksanbefalinger

Bruk for 4+ alternativer

Select egner seg når det er mange alternativer å velge mellom. For 2–3 alternativer er radioknapper ofte bedre.

Ikke bruk for binære valg

For av/på-valg, bruk Switch. For ja/nei, bruk radioknapper eller en checkbox.

Bruk en tydelig placeholder

Placeholder-teksten bør fortelle brukeren hva de skal velge.

Ikke bruk generisk placeholder

Unngå vage placeholdere som 'Velg...' uten kontekst.

Tilgjengelighet

Full tastaturnavigasjon: piltaster, Home, End, Enter, Space, Escape
Typeahead-søk: begynn å skrive for å hoppe til matchende alternativ
aria-expanded, aria-haspopup og aria-activedescendant settes automatisk
Støtter aria-label og aria-labelledby via Label-kobling
Hake-ikon indikerer valgt element visuelt

Props

Select (rot)

Prop	Type	Default	Beskrivelse
`value`	`string`	—	Kontrollert valgt verdi
`defaultValue`	`string`	—	Standard valgt verdi
`onValueChange`	`(value: string) => void`	—	Kalles når valgt verdi endres
`disabled`	`boolean`	`false`	Deaktiver hele select-en
`name`	`string`	—	Navn for skjemainnsending

SelectTrigger

Arver alle props fra <button>.

SelectValue

Prop	Type	Default	Beskrivelse
`placeholder`	`string`	—	Tekst som vises når ingen verdi er valgt

SelectItem

Prop	Type	Default	Beskrivelse
`value`	`string`	—	Verdien til alternativet
`disabled`	`boolean`	`false`	Deaktiver dette alternativet