Radio Group

Allows users to select a single option from a list of mutually exclusive choices.

	<script lang="ts">
  import { RadioGroup, Label } from "$lib";
</script>
 
<RadioGroup.Root class="flex flex-col gap-4 text-sm font-medium">
  <div
    class="group flex cursor-pointer select-none items-center gap-3 text-foreground transition-all"
  >
    <RadioGroup.Item
      id="amazing"
      value="amazing"
      class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-150 ease-in-out sq-5 hover:border-dark-40 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
    />
    <Label.Root for="amazing">Amazing</Label.Root>
  </div>
  <div
    class="group flex cursor-pointer select-none items-center gap-3 text-foreground transition-all"
  >
    <RadioGroup.Item
      id="average"
      value="average"
      class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-150 ease-in-out sq-5 hover:border-dark-40 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
    />
    <Label.Root for="average">Average</Label.Root>
  </div>
  <div
    class="group flex cursor-pointer select-none items-center gap-3 text-foreground transition-all"
  >
    <RadioGroup.Item
      id="terrible"
      value="terrible"
      class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-150 ease-in-out sq-5 hover:border-dark-40 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
    />
    <Label.Root for="terrible">Terrible</Label.Root>
  </div>
</RadioGroup.Root>

	<script lang="ts">
  import { RadioGroup, Label } from "$lib";
</script>
 
<RadioGroup.Root class="flex flex-col gap-4 text-sm font-medium">
  <div
    class="group flex cursor-pointer select-none items-center gap-3 text-foreground transition-all"
  >
    <RadioGroup.Item
      id="amazing"
      value="amazing"
      class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-150 ease-in-out sq-5 hover:border-dark-40 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
    />
    <Label.Root for="amazing">Amazing</Label.Root>
  </div>
  <div
    class="group flex cursor-pointer select-none items-center gap-3 text-foreground transition-all"
  >
    <RadioGroup.Item
      id="average"
      value="average"
      class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-150 ease-in-out sq-5 hover:border-dark-40 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
    />
    <Label.Root for="average">Average</Label.Root>
  </div>
  <div
    class="group flex cursor-pointer select-none items-center gap-3 text-foreground transition-all"
  >
    <RadioGroup.Item
      id="terrible"
      value="terrible"
      class="shrink-0 rounded-full border border-border-input bg-background transition-all duration-150 ease-in-out sq-5 hover:border-dark-40 data-[state=checked]:border-6 data-[state=checked]:border-foreground"
    />
    <Label.Root for="terrible">Terrible</Label.Root>
  </div>
</RadioGroup.Root>

Amazing

Average

Terrible

Structure

	<script lang="ts">
  import { RadioGroup } from "bits-ui";
</script>
 
<RadioGroup.Root>
  <RadioGroup.Item>
    <RadioGroup.ItemIndicator />
  </RadioGroup.Item>
</RadioGroup.Root>

	<script lang="ts">
  import { RadioGroup } from "bits-ui";
</script>
 
<RadioGroup.Root>
  <RadioGroup.Item>
    <RadioGroup.ItemIndicator />
  </RadioGroup.Item>
</RadioGroup.Root>

Component API

RadioGroup.Root

The radio group component used to group radio items under a common name for form submission.

Property	Type	Description
`disabled`	`boolean`	Whether or not the radio group is disabled. This prevents the user from interacting with it. `Default: false`
`required`	`boolean`	Whether or not the radio group is required. `Default: false`
`loop`	`boolean`	Whether or not the radio group should loop through the items when navigating with the arrow keys. `Default: false`
`orientation`	`enum`	The orientation of the radio group. `Default: 'vertical'`
`value`	`string`	The value of the currently selected radio item. You can bind to this value to control the radio group's value from outside the component. `Default: —— undefined`
`onValueChange`	`function`	A callback that is fired when the radio group's value changes. `Default: —— undefined`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-orientation`	`enum`	The orientation of the radio group.
`data-radio-group-root`	`——`	Present on the root element.

RadioGroup.Item

An radio item, which must be a child of the RadioGroup.Root component.

Property	Type	Description
`disabled`	`boolean`	Whether or not the radio item is disabled. This prevents the user from interacting with it. `Default: false`
`value` * Required	`string`	The value of the radio item. This should be unique for each radio item in the group. `Default: —— undefined`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLButtonElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-disabled`	`——`	Present when the radio item is disabled.
`data-value`	`——`	The value of the radio item.
`data-state`	`enum`	The radio item's checked state.
`data-orientation`	`enum`	The orientation of the parent radio group.
`data-radio-group-item`	`——`	Present on the radio item element.

RadioGroup.Input

A hidden input that is used to submit the radio group's value with a form. It can receive all the same props/attributes as a normal HTML input.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLInputElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

RadioGroup.ItemIndicator

A component which is used to indicate the radio item's checked state. Any children of this component will only be visible when the radio item is checked.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`el`	`HTMLDivElement`	The underlying DOM element being rendered. You can bind to this to programatically interact with the element. `Default: —— undefined`

Slot Property	Type	Description
`attrs`	`object`	Additional attributes to apply to the element if using the `asChild` prop with delegation.
`checked`	`boolean`	Whether or not the radio item is checked.

Data Attribute	Value	Description
`data-radio-item-indicator`	`——`	Present on the indicator element.