Radio Group

Allows users to select a single option from a predetermined set of choices.

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

Root

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

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.
`disabled`	`false`	`boolean` Whether or not the radio group is disabled. This prevents the user from interacting with it.
`loop`	`false`	`boolean` Whether or not the radio group should loop through the items when navigating with the arrow keys.
`orientation`	`'vertical'`	`'vertical' \| 'horizontal'` The orientation of the radio group.
`value`	-	`string` The value of the currently selected radio item. This is the value that will be submitted with a form.
`onValueCHange`	-	`(value: string \| undefined) => void` A callback that is fired when the radio group's value changes.

Data Attribute	Value/Description
`data-orientation`	`'vertical' \| 'horizontal'` The orientation of the radio group.

Item

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

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.
`disabled`	`false`	`boolean` Whether or not the radio item is disabled. This prevents the user from interacting with it.
`value`	-	`string` The value of the currently selected radio item. This is the value that will be submitted with a form.

Data Attribute	Value/Description
`data-disabled`	Present when the radio item is disabled.
`data-value`	The value of the radio item.
`data-state`	`'checked' \| 'unchecked'` The radio item's checked state.
`data-orientation`	`'vertical' \| 'horizontal'` The orientation of the parent radio group.

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.

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.

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.

🚧 UNDER CONSTRUCTION 🚧