Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Component Source

View the source code for the radio-group component.

$lib/components/ui/radio-group/

Installation

npx nnuikit add radio-group

import * as RadioGroup from "$lib/components/ui/radio-group";

Quick Start

Option 1

Option 2

Option 3

<script lang="ts">
  import * as RadioGroup from "$lib/components/ui/radio-group";
  import { Label } from "$lib/components/ui/label";

  let value = $state("option1");
</script>

<RadioGroup.Root bind:value>
  <div class="flex items-center gap-2">
    <RadioGroup.Item value="option1" id="option1" />
    <Label for="option1">Option 1</Label>
  </div>
  <div class="flex items-center gap-2">
    <RadioGroup.Item value="option2" id="option2" />
    <Label for="option2">Option 2</Label>
  </div>
</RadioGroup.Root>

Interactive Playground

Select from a set of mutually exclusive options.

Default

Comfortable

Compact

<RadioGroup.Root bind:value>
  <div class="flex items-center gap-2">
    <RadioGroup.Item value="default" id="default" />
    <Label for="default">Default</Label>
  </div>
  <div class="flex items-center gap-2">
    <RadioGroup.Item value="comfortable" id="comfortable" />
    <Label for="comfortable">Comfortable</Label>
  </div>
  <div class="flex items-center gap-2">
    <RadioGroup.Item value="compact" id="compact" />
    <Label for="compact">Compact</Label>
  </div>
</RadioGroup.Root>

Orientation

Size

Current Value

value: "default"

Sizes

Different radio group sizes.

Small

<RadioGroup.Root size="sm">
  <RadioGroup.Item value="1" />
  <RadioGroup.Item value="2" />
  <RadioGroup.Item value="3" />
</RadioGroup.Root>

Medium

<RadioGroup.Root size="md">
  <RadioGroup.Item value="1" />
  <RadioGroup.Item value="2" />
  <RadioGroup.Item value="3" />
</RadioGroup.Root>

Large

<RadioGroup.Root size="lg">
  <RadioGroup.Item value="1" />
  <RadioGroup.Item value="2" />
  <RadioGroup.Item value="3" />
</RadioGroup.Root>

Examples

Common radio group patterns.

Notification Preferences

Choose how you want to receive updates

Email only

SMS only

Both email and SMS

No notifications

<RadioGroup.Root value="email">
  <RadioGroup.Item value="email" label="Email only" />
  <RadioGroup.Item value="sms" label="SMS only" />
  <RadioGroup.Item value="both" label="Both email and SMS" />
  <RadioGroup.Item value="none" label="No notifications" />
</RadioGroup.Root>

Payment Method

Select your preferred payment option

Credit/Debit Card

PayPal

Bank Transfer

<RadioGroup.Root value="card">
  <RadioGroup.Item value="card" label="Credit/Debit Card" />
  <RadioGroup.Item value="paypal" label="PayPal" />
  <RadioGroup.Item value="bank" label="Bank Transfer" />
</RadioGroup.Root>

Theme Selection

Horizontal layout example

Light

Dark

System

<RadioGroup.Root value="light" class="flex gap-6">
  <RadioGroup.Item value="light" label="Light" />
  <RadioGroup.Item value="dark" label="Dark" />
  <RadioGroup.Item value="system" label="System" />
</RadioGroup.Root>

Size Options

Product size selection

<RadioGroup.Root value="m" class="flex gap-4">
  <RadioGroup.Item value="s" label="S" />
  <RadioGroup.Item value="m" label="M" />
  <RadioGroup.Item value="l" label="L" />
  <RadioGroup.Item value="xl" label="XL" />
</RadioGroup.Root>

Accessibility

Native input: uses real <input type='radio'> elements

Keyboard: Arrow keys navigate between options

Group: fieldset semantics with legend

Focus: visible focus ring on keyboard navigation

Props

RadioGroup

Prop	Type	Default	Description
`value`	`string`	-	Controlled value (bindable)
`size`	`"sm" \| "md" \| "lg"`	"md"	The size of the radio buttons
`class`	`string`	-	Custom CSS classes

RadioGroupItem

Prop	Type	Default	Description
`value`	`string`	required	Value for this radio option
`label`	`string`	-	Label text for the option
`disabled`	`boolean`	false	Disables this option