Radio

A set of mutually exclusive options where only one can be selected at a time.

Anatomy

<script>
  import {
    Radio,
    RadioGroup,
    RadioItem,
    RadioItemControl,
    RadioItemText,
    RadioIndicator,
    RadioItemHiddenInput,
    RadioLabel,
  } from "@saas-ui/svelte/components/radio";
</script>

<Radio.Group>
  <Radio.Label>Select an option</Radio.Label>
  <Radio.Item value="option1">
    <Radio.ItemControl>
      <Radio.Indicator />
    </Radio.ItemControl>
    <Radio.ItemText>Option 1</Radio.ItemText>
    <Radio.ItemHiddenInput />
  </Radio.Item>
  <Radio.Item value="option2">
    <Radio.ItemControl>
      <Radio.Indicator />
    </Radio.ItemControl>
    <Radio.ItemText>Option 2</Radio.ItemText>
    <Radio.ItemHiddenInput />
  </Radio.Item>
</Radio.Group>

Examples

Basic Accessibility

Basic radio group with default styling.

<Radio.Group defaultValue="1">
	<HStack gap={6}>
		<Radio.Item value="1" label="Option 1" />
		<Radio.Item value="2" label="Option 2" />
		<Radio.Item value="3" label="Option 3" />
	</HStack>
</Radio.Group>

Colours Accessibility

Use the colour prop to change the colour of the radio buttons.

<VStack align="start" gap={4}>
	{#each colours as colour}
		<HStack align="center" gap={6} class="w-full">
			<Text size="xs" class="min-w-[8ch]">
				{colour}
			</Text>
			<HStack gap={6}>
				{#each radioVariants as variant}
					<Radio.Group {colour} {variant} defaultValue="checked">
						<HStack gap={4}>
							<Radio.Item value="checked" label={variant} />
						</HStack>
					</Radio.Group>
				{/each}
			</HStack>
		</HStack>
	{/each}
</VStack>

Composition Accessibility

Use the composition API for full control over the radio button structure.

<Radio.Group defaultValue="react">
	<Radio.Label>Choose your option</Radio.Label>
	<VStack gap={2}>
		<Radio.Item value="react">
			{#snippet children()}
				<Radio.ItemControl>
					<Radio.Indicator />
				</Radio.ItemControl>
				<Radio.ItemText>
					<VStack gap={0}>
						<Text as="span" class="text-fg-default">React</Text>
						<Text
							as="span"
							size="xs"
							class="text-fg-muted font-normal"
						>
							A JavaScript library for building user
							interfaces
						</Text>
					</VStack>
				</Radio.ItemText>
				<Radio.ItemHiddenInput />
			{/snippet}
		</Radio.Item>
		<Radio.Item value="svelte">
			{#snippet children()}
				<Radio.ItemControl>
					<Radio.Indicator />
				</Radio.ItemControl>
				<Radio.ItemText>
					<VStack gap={0}>
						<Text as="span" class="text-fg-default">Svelte</Text>
						<Text
							as="span"
							size="xs"
							class="text-fg-muted font-normal"
						>
							Cybernetically enhanced web apps
						</Text>
					</VStack>
				</Radio.ItemText>
				<Radio.ItemHiddenInput />
			{/snippet}
		</Radio.Item>
	</VStack>
</Radio.Group>

Controlled Accessibility

Use the value and onValueChange props to control the selected value.

<VStack gap={4} align="start">
	<Text size="sm" class="text-fg-muted">
		Selected: {controlledValue}
	</Text>
	<Radio.Group
		bind:value={controlledValue}
		onValueChange={({ value }) => (controlledValue = value ?? "1")}
	>
		<HStack gap={6}>
			<Radio.Item value="1" label="Option 1" />
			<Radio.Item value="2" label="Option 2" />
			<Radio.Item value="3" label="Option 3" />
		</HStack>
	</Radio.Group>
</VStack>

Disabled Accessibility

Use the disabled prop to disable a radio item or the entire group.

<Radio.Group defaultValue="2">
	<HStack gap={6}>
		<Radio.Item value="1" disabled label="Option 1" />
		<Radio.Item value="2" label="Option 2" />
		<Radio.Item value="3" label="Option 3" />
	</HStack>
</Radio.Group>

Orientation Accessibility

Use the orientation prop to change the layout direction of the radio group.

<HStack gap={12} align="start">
	<VStack gap={2}>
		<Text size="xs" class="text-fg-muted">Horizontal</Text>
		<Radio.Group orientation="horizontal" defaultValue="1">
			<HStack gap={6}>
				<Radio.Item value="1" label="Option 1" />
				<Radio.Item value="2" label="Option 2" />
				<Radio.Item value="3" label="Option 3" />
			</HStack>
		</Radio.Group>
	</VStack>
	<VStack gap={2}>
		<Text size="xs" class="text-fg-muted">Vertical</Text>
		<Radio.Group orientation="vertical" defaultValue="1">
			<VStack gap={2}>
				<Radio.Item value="1" label="Option 1" />
				<Radio.Item value="2" label="Option 2" />
				<Radio.Item value="3" label="Option 3" />
			</VStack>
		</Radio.Group>
	</VStack>
</HStack>

Sizes Accessibility

Use the size prop to change the size of the radio buttons.

<HStack align="start" gap={4}>
	{#each radioSizes as size}
		<Radio.Group {size} defaultValue="react">
			<Radio.Item value="react" label="Radio ({size})" />
		</Radio.Group>
	{/each}
</HStack>

Variants Accessibility

Use the variant prop to change the visual style of the radio buttons.

<VStack gap={4}>
	{#each radioVariants as variant}
		<Radio.Group {variant} defaultValue="react" colour="teal">
			<HStack gap={4}>
				<Radio.Item
					value="react"
					class="min-w-32"
					label="Radio ({variant})"
				/>
			</HStack>
		</Radio.Group>
	{/each}
</VStack>

With Label Accessibility

Use Radio.Label to add a label to the radio group.

<Radio.Group defaultValue="react">
	<Radio.Label>Select framework</Radio.Label>
	<VStack gap={2}>
		<Radio.Item value="react" label="React" />
		<Radio.Item value="svelte" label="Svelte" />
		<Radio.Item value="vue" label="Vue" />
		<Radio.Item value="angular" label="Angular" />
	</VStack>
</Radio.Group>

Props

Radio.Group

The radio group container that manages state and context.

Prop	Type	Default	Description
`children`	`Snippet`	-	Content to render inside the radio group.
`class`	`string`	-	Additional CSS classes to apply.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	The size of the radio buttons.
`variant`	`"solid" \| "subtle" \| "outline"`	`"solid"`	The visual style of the radio buttons.
`colour`	`ColourName`	`"indigo"`	The colour palette of the radio buttons.
`value`	`string`	-	The controlled value of the radio group.
`defaultValue`	`string`	-	The default value when uncontrolled.
`name`	`string`	-	The name of the input fields (used for form submission).
`orientation`	`"horizontal" \| "vertical"`	`"vertical"`	Layout orientation of the radio group.
`disabled`	`boolean`	`false`	Whether the radio group is disabled.
`invalid`	`boolean`	`false`	Whether the radio group is in an invalid state.
`readOnly`	`boolean`	`false`	Whether the radio group is read-only.
`onValueChange`	`(details: { value: string \| null }) => void`	-	Callback invoked when the value changes.

Radio.Item

An individual radio item within the group.

Prop	Type	Default	Description
`children`	`Snippet`	-	Content to render inside the radio item (composition API).
`label`	`string`	-	The label text displayed next to the radio.
`class`	`string`	-	Additional CSS classes to apply.
`value`	`string`	-	The value of this radio item.
`disabled`	`boolean`	`false`	Whether this radio item is disabled.
`invalid`	`boolean`	`false`	Whether this radio item is invalid.

Radio.ItemControl

The visual control element for the radio (the circular button).

Prop	Type	Default	Description
`children`	`Snippet`	-	The content of the control (usually indicators).
`class`	`string`	-	Additional classes to apply to the control.

Radio.Indicator

The indicator element that shows when the radio is selected.

Prop	Type	Default	Description
`children`	`Snippet`	-	Optional custom content for the indicator.
`class`	`string`	-	Additional classes to apply to the indicator.

Radio.ItemText

The text label for a radio item.

Prop	Type	Default	Description
`children`	`Snippet`	-	The content of the label.
`class`	`string`	-	Additional classes to apply to the label.

Radio.ItemHiddenInput

A hidden input element for form submission and accessibility.

Prop	Type	Default	Description

Radio.Label

A label for the entire radio group.

Prop	Type	Default	Description
`children`	`Snippet`	-	The content of the group label.
`class`	`string`	-	Additional classes to apply to the label.