RadioGroup

Kildekode på GitHub · Les som Markdown

RadioGroup lar brukeren velge ett alternativ fra en synlig liste. Bygget på Radix UI RadioGroup med full tastaturnavigasjon.

Bruk RadioGroup for 2–5 synlige alternativer. For flere alternativer, bruk Select.

Importering

import { RadioGroup, RadioGroupItem } from "@kilden/designsystem";

Grunnleggende bruk

<RadioGroup defaultValue="comfortable" aria-label="Tetthet">
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
  <RadioGroupItem value="compact" id="compact" />
  <Label htmlFor="compact">Kompakt</Label>
</div>
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
  <RadioGroupItem value="comfortable" id="comfortable" />
  <Label htmlFor="comfortable">Komfortabel</Label>
</div>
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
  <RadioGroupItem value="spacious" id="spacious" />
  <Label htmlFor="spacious">Romslig</Label>
</div>
</RadioGroup>

Med FormField

<FormField>
<Label>Foretrukket kontaktmetode</Label>
<RadioGroup defaultValue="email">
  <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
    <RadioGroupItem value="email" id="contact-email" />
    <Label htmlFor="contact-email">E-post</Label>
  </div>
  <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
    <RadioGroupItem value="phone" id="contact-phone" />
    <Label htmlFor="contact-phone">Telefon</Label>
  </div>
  <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
    <RadioGroupItem value="sms" id="contact-sms" />
    <Label htmlFor="contact-sms">SMS</Label>
  </div>
</RadioGroup>
<FormDescription>Vi bruker dette for å sende deg oppdateringer.</FormDescription>
</FormField>

Horisontal layout

<RadioGroup defaultValue="medium" aria-label="Størrelse" style={{ display: "flex", gap: "1rem" }}>
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
  <RadioGroupItem value="small" id="size-s" />
  <Label htmlFor="size-s">S</Label>
</div>
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
  <RadioGroupItem value="medium" id="size-m" />
  <Label htmlFor="size-m">M</Label>
</div>
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
  <RadioGroupItem value="large" id="size-l" />
  <Label htmlFor="size-l">L</Label>
</div>
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
  <RadioGroupItem value="xlarge" id="size-xl" />
  <Label htmlFor="size-xl">XL</Label>
</div>
</RadioGroup>

Med deaktiverte alternativer

<RadioGroup defaultValue="free" aria-label="Plan">
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
  <RadioGroupItem value="free" id="plan-free" />
  <Label htmlFor="plan-free">Gratis</Label>
</div>
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
  <RadioGroupItem value="pro" id="plan-pro" />
  <Label htmlFor="plan-pro">Pro</Label>
</div>
<div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
  <RadioGroupItem value="enterprise" id="plan-enterprise" disabled />
  <Label htmlFor="plan-enterprise" style={{ opacity: 0.5 }}>Enterprise (kommer snart)</Label>
</div>
</RadioGroup>

Bruksanbefalinger

Alternativ A

Alternativ B

Bruk for 2–5 synlige alternativer

RadioGroup viser alle alternativene samtidig, noe som gir god oversikt for et begrenset antall valg.

○ Alt 1
○ Alt 2
○ Alt 3
○ Alt 4
○ Alt 5
○ Alt 6
○ Alt 7

Ikke bruk for mange alternativer

For 6+ alternativer tar radioknapper for mye plass. Bruk Select i stedet.

Tilgjengelighet

Bruker role="radiogroup" og role="radio" automatisk
Piltaster navigerer mellom alternativer
Space velger det fokuserte alternativet
Koble til label via aria-label/aria-labelledby på RadioGroup
Individuelle items kobles til label via id/htmlFor

Props

RadioGroup (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 gruppen
`orientation`	`"horizontal" \| "vertical"`	`"vertical"`	Retning for tastaturnavigasjon
`name`	`string`	—	Navn for skjemainnsending

RadioGroupItem

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