Radio Group
Allows users to select a single option from a predetermined set of choices.
<script lang="ts">
import { RadioGroup, Label } from "$lib";
</script>
<RadioGroup.Root class="flex flex-col gap-3">
<div
class="group select-none cursor-pointer flex items-center gap-3 text-primary/50 [&:has([data-state=checked])]:text-primary transition-colors"
>
<RadioGroup.Item
id="amazing"
value="amazing"
class="shrink-0 sq-5 rounded-full border-2 border-primary/40 transition-all data-[state=checked]:group-hover:border-primary data-[state=checked]:border-6 data-[state=checked]:border-primary duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-background/70 ring-offset-1"
/>
<Label.Root for="amazing" class="font-medium text-sm">Amazing</Label.Root>
</div>
<div
class="group select-none cursor-pointer flex items-center gap-3 text-primary/50 [&:has([data-state=checked])]:text-primary transition-colors"
>
<RadioGroup.Item
id="average"
value="average"
class="shrink-0 sq-5 rounded-full border-2 border-primary/40 transition-all data-[state=checked]:group-hover:border-primary data-[state=checked]:border-6 data-[state=checked]:border-primary duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-background/70 ring-offset-1 "
/>
<Label.Root for="average" class="font-medium text-sm">Average</Label.Root>
</div>
<div
class="group select-none cursor-pointer flex items-center gap-3 text-primary/50 [&:has([data-state=checked])]:text-primary transition-colors"
>
<RadioGroup.Item
id="terrible"
value="terrible"
class="shrink-0 sq-5 rounded-full border-2 border-primary/40 transition-all data-[state=checked]:group-hover:border-primary data-[state=checked]:border-6 data-[state=checked]:border-primary duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-background/70 ring-offset-1"
/>
<Label.Root for="terrible" class="font-medium text-sm">Terrible</Label.Root>
</div>
</RadioGroup.Root>
<script lang="ts">
import { RadioGroup, Label } from "$lib";
</script>
<RadioGroup.Root class="flex flex-col gap-3">
<div
class="group select-none cursor-pointer flex items-center gap-3 text-primary/50 [&:has([data-state=checked])]:text-primary transition-colors"
>
<RadioGroup.Item
id="amazing"
value="amazing"
class="shrink-0 sq-5 rounded-full border-2 border-primary/40 transition-all data-[state=checked]:group-hover:border-primary data-[state=checked]:border-6 data-[state=checked]:border-primary duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-background/70 ring-offset-1"
/>
<Label.Root for="amazing" class="font-medium text-sm">Amazing</Label.Root>
</div>
<div
class="group select-none cursor-pointer flex items-center gap-3 text-primary/50 [&:has([data-state=checked])]:text-primary transition-colors"
>
<RadioGroup.Item
id="average"
value="average"
class="shrink-0 sq-5 rounded-full border-2 border-primary/40 transition-all data-[state=checked]:group-hover:border-primary data-[state=checked]:border-6 data-[state=checked]:border-primary duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-background/70 ring-offset-1 "
/>
<Label.Root for="average" class="font-medium text-sm">Average</Label.Root>
</div>
<div
class="group select-none cursor-pointer flex items-center gap-3 text-primary/50 [&:has([data-state=checked])]:text-primary transition-colors"
>
<RadioGroup.Item
id="terrible"
value="terrible"
class="shrink-0 sq-5 rounded-full border-2 border-primary/40 transition-all data-[state=checked]:group-hover:border-primary data-[state=checked]:border-6 data-[state=checked]:border-primary duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-background/70 ring-offset-1"
/>
<Label.Root for="terrible" class="font-medium text-sm">Terrible</Label.Root>
</div>
</RadioGroup.Root>
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
The radio group component used to group radio items under a common name for form submission.
| Property | Type | Description |
|---|---|---|
asChild | boolean | Whether to use render delegation with this component or not. Default: false |
disabled | boolean | Whether or not the radio group is disabled. This prevents the user from interacting with it. Default: false |
loop | boolean | Whether or not the radio group should loop through the items when navigating with the arrow keys. Default: false |
orientation | 'vertical' | 'horizontal' | The orientation of the radio group. Default: 'vertical' |
value | string | The value of the currently selected radio item. This is the value that will be submitted with a form. Default: undefined |
onValueCHange | (value: string | undefined) => void | A callback that is fired when the radio group's value changes. Default: undefined |
| Data Attribute | Value/Description |
|---|---|
data-orientation | The orientation of the radio group. Value: 'vertical' | 'horizontal' |
An radio item, which must be a child of the `RadioGroup.Root` component.
| Property | Type | Description |
|---|---|---|
asChild | boolean | Whether to use render delegation with this component or not. Default: false |
disabled | boolean | Whether or not the radio item is disabled. This prevents the user from interacting with it. Default: false |
value | string | The value of the currently selected radio item. This is the value that will be submitted with a form. Default: undefined |
| Data Attribute | Value/Description |
|---|---|
data-disabled | Present when the radio item is disabled. Value: '' |
data-value | The value of the radio item. Value: '' |
data-state | The radio item's checked state. Value: 'checked' | 'unchecked' |
data-orientation | The orientation of the parent radio group. Value: 'vertical' | 'horizontal' |
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 |
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 🚧