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

Variants

---
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>

Sizes

---
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 Props

Prop	Type	Default	Description
name	`string`	Required	Name for the radio group inputs
value	`string`	-	Current value of the radio group
defaultValue	`string`	-	Default value if `value` not provided
legend	`string`	-	Screen reader label for the group
required	`boolean`	`false`	Whether the radio group is required
disabled	`boolean`	`false`	Whether the radio group is disabled
orientation	`"vertical"` \| `"horizontal"`	`"vertical"`	Layout orientation of radio items

This component also accepts all standard HTML attributes for <fieldset> elements.

RadioGroupItem Props

Prop	Type	Default	Description
value	`string`	Required	Value of the radio item
id	`string`	-	ID for the radio input
name	`string`	-	Name for the radio input (use group’s name)
checked	`boolean`	`false`	Whether the radio is checked
disabled	`boolean`	`false`	Whether the radio is disabled
size	`"sm"` \| `"md"` \| `"lg"`	`"md"`	Size of the radio button
variant	`"default"` \| `"primary"` \| `"secondary"` \| `"info"` \| `"success"` \| `"warning"` \| `"error"`	`"default"`	Color variant of the radio button

This component also accepts all standard HTML attributes for <input type="radio"> elements.

Changelog

v1.0.0

Initial release with starwind v1.7.0