On this page

Radio Group

Option 1

Option 2

Option 3

---
import { RadioGroup, RadioGroupItem } from "@/components/starwind/radio-group";
import { Label } from "@/components/starwind/label";
---

<RadioGroup name="demo-radio" defaultValue="option-1" legend="Choose an option">
  <div class="flex gap-2 items-center">
    <RadioGroupItem id="option-1" value="option-1" name="demo-radio-1" />
    <Label for="option-1">Option 1</Label>
  </div>
  <div class="flex gap-2 items-center">
    <RadioGroupItem id="option-2" value="option-2" name="demo-radio-1" />
    <Label for="option-2">Option 2</Label>
  </div>
  <div class="flex gap-2 items-center">
    <RadioGroupItem id="option-3" value="option-3" name="demo-radio-1" />
    <Label for="option-3">Option 3</Label>
  </div>
</RadioGroup>

Installation

pnpx starwind@latest add radio-group

npx starwind@latest add radio-group

yarn dlx starwind@latest add radio-group

Usage

variant

---
import { RadioGroup, RadioGroupItem } from "@/components/starwind/radio-group";
import { Label } from "@/components/starwind/label";
---

<RadioGroup name="variant-radio" legend="Default" defaultValue="default-1">
  <div class="flex gap-2 items-center">
    <RadioGroupItem id="default-1" value="default-1" variant="default" name="variant-default" />
    <Label for="default-1">Default Option 1</Label>
  </div>
  <div class="flex gap-2 items-center">
    <RadioGroupItem id="default-2" value="default-2" variant="default" name="variant-default" />
    <Label for="default-2">Default Option 2</Label>
  </div>
</RadioGroup>

<RadioGroup name="variant-primary" legend="Primary" defaultValue="primary-1">
  <div class="flex gap-2 items-center">
    <RadioGroupItem id="primary-1" value="primary-1" variant="primary" name="variant-primary" />
    <Label for="primary-1">Primary Option 1</Label>
  </div>
  <div class="flex gap-2 items-center">
    <RadioGroupItem id="primary-2" value="primary-2" variant="primary" name="variant-primary" />
    <Label for="primary-2">Primary Option 2</Label>
  </div>
</RadioGroup>

<RadioGroup name="variant-secondary" legend="Secondary" defaultValue="secondary-1">
  <div class="flex gap-2 items-center">
    <RadioGroupItem id="secondary-1" value="secondary-1" variant="secondary" name="variant-secondary" />
    <Label for="secondary-1">Secondary Option 1</Label>
  </div>
  <div class="flex gap-2 items-center">
    <RadioGroupItem id="secondary-2" value="secondary-2" variant="secondary" name="variant-secondary" />
    <Label for="secondary-2">Secondary Option 2</Label>
  </div>
</RadioGroup>

<RadioGroup name="variant-info" legend="Info" defaultValue="info-1">
  <div class="flex gap-2 items-center">
    <RadioGroupItem id="info-1" value="info-1" variant="info" name="variant-info" />
    <Label for="info-1">Info Option 1</Label>
  </div>
  <div class="flex gap-2 items-center">
    <RadioGroupItem id="info-2" value="info-2" variant="info" name="variant-info" />
    <Label for="info-2">Info Option 2</Label>
  </div>
</RadioGroup>

<RadioGroup name="variant-success" legend="Success" defaultValue="success-1">
  <div class="flex gap-2 items-center">
    <RadioGroupItem id="success-1" value="success-1" variant="success" name="variant-success" />
    <Label for="success-1">Success Option 1</Label>
  </div>
  <div class="flex gap-2 items-center">
    <RadioGroupItem id="success-2" value="success-2" variant="success" name="variant-success" />
    <Label for="success-2">Success Option 2</Label>
  </div>
</RadioGroup>

<RadioGroup name="variant-warning" legend="Warning" defaultValue="warning-1">
  <div class="flex gap-2 items-center">
    <RadioGroupItem id="warning-1" value="warning-1" variant="warning" name="variant-warning" />
    <Label for="warning-1">Warning Option 1</Label>
  </div>
  <div class="flex gap-2 items-center">
    <RadioGroupItem id="warning-2" value="warning-2" variant="warning" name="variant-warning" />
    <Label for="warning-2">Warning Option 2</Label>
  </div>
</RadioGroup>

<RadioGroup name="variant-error" legend="Error" defaultValue="error-1">
  <div class="flex gap-2 items-center">
    <RadioGroupItem id="error-1" value="error-1" variant="error" name="variant-error" />
    <Label for="error-1">Error Option 1</Label>
  </div>
  <div class="flex gap-2 items-center">
    <RadioGroupItem id="error-2" value="error-2" variant="error" name="variant-error" />
    <Label for="error-2">Error Option 2</Label>
  </div>
</RadioGroup>

size

---
import { RadioGroup, RadioGroupItem } from "@/components/starwind/radio-group";
import { Label } from "@/components/starwind/label";
---

<RadioGroup name="size-sm" legend="Small" defaultValue="sm-1">
  <div class="flex gap-2 items-center">
    <RadioGroupItem id="sm-1" value="sm-1" size="sm" name="size-sm" />
    <Label for="sm-1" size="sm">Small Option 1</Label>
  </div>
  <div class="flex gap-2 items-center">
    <RadioGroupItem id="sm-2" value="sm-2" size="sm" name="size-sm" />
    <Label for="sm-2" size="sm">Small Option 2</Label>
  </div>
</RadioGroup>

<RadioGroup name="size-md" legend="Medium" defaultValue="md-1">
  <div class="flex gap-2 items-center">
    <RadioGroupItem id="md-1" value="md-1" size="md" name="size-md" />
    <Label for="md-1" size="md">Medium Option 1</Label>
  </div>
  <div class="flex gap-2 items-center">
    <RadioGroupItem id="md-2" value="md-2" size="md" name="size-md" />
    <Label for="md-2" size="md">Medium Option 2</Label>
  </div>
</RadioGroup>

<RadioGroup name="size-lg" legend="Large" defaultValue="lg-1">
  <div class="flex gap-2 items-center">
    <RadioGroupItem id="lg-1" value="lg-1" size="lg" name="size-lg" />
    <Label for="lg-1" size="lg">Large Option 1</Label>
  </div>
  <div class="flex gap-2 items-center">
    <RadioGroupItem id="lg-2" value="lg-2" size="lg" name="size-lg" />
    <Label for="lg-2" size="lg">Large Option 2</Label>
  </div>
</RadioGroup>

orientation

---
import { RadioGroup, RadioGroupItem } from "@/components/starwind/radio-group";
---

<h3>Vertical (Default)</h3>
<RadioGroup name="orientation-vertical" orientation="vertical" defaultValue="vertical-1">
  <div class="space-y-2">
    <RadioGroupItem id="vertical-1" value="vertical-1" name="orientation-vertical" />
    <RadioGroupItem id="vertical-2" value="vertical-2" name="orientation-vertical" />
    <RadioGroupItem id="vertical-3" value="vertical-3" name="orientation-vertical" />
  </div>
</RadioGroup>

<h3>Horizontal</h3>
<RadioGroup name="orientation-horizontal" orientation="horizontal" defaultValue="horizontal-1">
  <RadioGroupItem id="horizontal-1" value="horizontal-1" name="orientation-horizontal" />
  <RadioGroupItem id="horizontal-2" value="horizontal-2" name="orientation-horizontal" />
  <RadioGroupItem id="horizontal-3" value="horizontal-3" name="orientation-horizontal" />
</RadioGroup>

Event Handling

The RadioGroup component emits a starwind:value-change event when a radio option is selected. This can be listened to in order to update your UI based on the event.detail.value property.

Radio Group Event Test

Option One

Option Two

Option Three

Selected value: none

---
import { RadioGroup, RadioGroupItem } from "@/components/starwind/radio-group";
import { Label } from "@/components/starwind/label";
---

<div class="space-y-4">
  <h3 class="text-lg font-medium">Radio Group Event Test</h3>

  <RadioGroup id="event-test" name="event-test" legend="Choose an option">
    <div class="flex gap-2">
      <RadioGroupItem id="event-1" value="one" name="radio-event-test" />
      <Label for="event-1">Option One</Label>
    </div>
    <div class="flex gap-2">
      <RadioGroupItem id="event-2" value="two" name="radio-event-test" />
      <Label for="event-2">Option Two</Label>
    </div>
    <div class="flex gap-2">
      <RadioGroupItem id="event-3" value="three" name="radio-event-test" />
      <Label for="event-3">Option Three</Label>
    </div>
  </RadioGroup>

  <div id="event-output" class="text-muted-foreground text-sm">
    Selected value: <span class="text-foreground font-medium">none</span>
  </div>
</div>

<script>
  import type { RadioGroupChangeEvent } from "@/components/starwind/radio-group";

  document.addEventListener("starwind:value-change", (e) => {
    const event = e as RadioGroupChangeEvent;
    const outputElement = document.querySelector("#event-output span");

    if (event.detail.radioGroupId === "event-test" && outputElement) {
      outputElement.textContent = event.detail.value;
    }
  });
</script>

The event emission happens when a radio item is selected and looks like:

const event = new CustomEvent<RadioGroupChangeEvent["detail"]>("starwind:value-change", {
  detail: {
    value: target.value, // string value of the selected radio
    radioGroupId: this.radioGroupId, // ID of the radio group
  },
  bubbles: true,
});

this.radioGroup.dispatchEvent(event);

API Reference

RadioGroup

The root component that manages the radio group state and keyboard navigation.

Prop	Type	Default
`name`	`string`	Required
`value`	`string`	-
`defaultValue`	`string`	-
`legend`	`string`	-
`required`	`boolean`	`false`
`disabled`	`boolean`	`false`
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`
`class`	`string`	-

<RadioGroup name="options" defaultValue="option-1" legend="Choose an option">
  <!-- Radio items -->
</RadioGroup>

Additional Notes:

name: Name for the radio group inputs
legend: Screen reader label for the group
orientation: Layout orientation of radio items

RadioGroupItem

Individual radio button item within the group.

Prop	Type	Default
`value`	`string`	Required
`id`	`string`	-
`name`	`string`	-
`checked`	`boolean`	`false`
`disabled`	`boolean`	`false`
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`variant`	`"default" \| "primary" \| "secondary" \| "info" \| "success" \| "warning" \| "error"`	`"default"`
`class`	`string`	-

<RadioGroupItem id="option-1" value="option-1" name="options" />

Changelog

v1.2.2

Removed debug logging statements

v1.2.1

Add named slot “icon” to RadioGroupItem to enable easy icon swapping

v1.2.0

style and focus state updates

v1.1.0

Add data-slot attribute to enable global styling updates

v1.0.0

Initial release with starwind v1.7.0