🦊 fox ui alpha

Quick Start Philosophy Customization Icons Haptics LLMs

Radio Group

llms.txt

Example

Default

Comfortable

Compact

Selected: comfortable

With descriptions

Hobby Free forever. Great for small side projects.

Pro $12/month. Unlimited projects and team seats.

Enterprise Custom pricing with SSO and priority support.

Plan: pro

Usage

A set of radio buttons where exactly one can be selected at a time.

The simplest way is to pass an options array — items, labels, and spacing are handled for you:

		<script lang="ts">
	import { RadioGroup } from '@foxui/all';

	let value = $state('comfortable');
</script>

<RadioGroup
	bind:value
	options={[
		{ value: 'default', label: 'Default' },
		{ value: 'comfortable', label: 'Comfortable' },
		{ value: 'compact', label: 'Compact' }
	]}
/>

With descriptions

Each option can carry an optional description:

		<RadioGroup
	bind:value
	options={[
		{ value: 'card', label: 'Card', description: 'Pay with a credit or debit card.' },
		{ value: 'paypal', label: 'PayPal', description: 'Redirect to PayPal to complete payment.' }
	]}
/>

Horizontal layout

		<RadioGroup bind:value orientation="horizontal" options={[...]} />

Custom rendering

For full control, skip options and compose with RadioGroupItem:

		<script lang="ts">
	import { RadioGroup, RadioGroupItem, Label } from '@foxui/all';

	let value = $state('option-one');
</script>

<RadioGroup bind:value>
	<label class="flex items-center gap-2">
		<RadioGroupItem value="option-one" id="option-one" />
		<Label for="option-one">Option One</Label>
	</label>
	<label class="flex items-center gap-2">
		<RadioGroupItem value="option-two" id="option-two" />
		<Label for="option-two">Option Two</Label>
	</label>
</RadioGroup>

API Reference

RadioGroup

A set of radio buttons where exactly one can be selected. Pass an `options` array for the common case, or use `RadioGroupItem` as children for custom layouts.

Property Type Description

value $bindable

string

The currently selected value. Default: ''

options

RadioGroupOption[]

Array of options rendered as radio items with labels. Each option is `{ value, label?, description?, disabled? }`. Omit to compose children manually. Default: —

variant

enum

Color variant applied to every item. Default: 'primary'

sizeVariant

enum

Size applied to every item. Default: 'default'

orientation

enum

Layout direction when rendering the options array. Default: 'vertical'

disabled

boolean

Disable the entire group. Default: —

onValueChange

function

Callback when the selected value changes. Default: —

children

Snippet

Custom content (e.g. `RadioGroupItem`s). Ignored if `options` is provided. Default: —

class

string

Additional CSS classes on the group container. Default: —

Property

value

options

variant

sizeVariant

orientation

disabled

onValueChange

children

class

RadioGroupItem

A single radio item. Use when composing a custom layout.

Property Type Description

value required

string

The value represented by this item.

variant

enum

Color variant. Default: 'primary'

sizeVariant

enum

Size of the radio circle. Default: 'default'

disabled

boolean

Disable this item. Default: —

string

HTML id used to associate an external `<Label for={id}>`. Default: —

class

string

Additional CSS classes. Default: —

Property

value

variant

sizeVariant

disabled

class