Radio Card

A card-based radio selection component that provides a more visual way to select from mutually exclusive options.

Anatomy

<script>
  import {
    RadioCard,
    RadioCardRoot,
    RadioCardLabel,
    RadioCardItem,
    RadioCardItemAddon,
  } from "@saas-ui/svelte/components/radio-card";
</script>

<RadioCard.Root>
  <RadioCard.Label>Select a plan</RadioCard.Label>
  <RadioCard.Item value="basic" label="Basic" description="For small teams" />
  <RadioCard.Item value="pro" label="Pro" description="For growing teams">
    <RadioCard.ItemAddon>Most popular</RadioCard.ItemAddon>
  </RadioCard.Item>
</RadioCard.Root>

Examples

Basic Accessibility

Basic radio card group with default styling.

<Box class="max-w-3xl">
	<RadioCard.Root defaultValue="next">
		<RadioCard.Label>Select framework</RadioCard.Label>
		<HStack align="stretch">
			{#each frameworks as item}
				<RadioCard.Item
					label={item.title}
					description={item.description}
					value={item.value}
				/>
			{/each}
		</HStack>
	</RadioCard.Root>
</Box>

Centered Accessibility

Use the align="center" prop to center content within cards.

<Box class="max-w-3xl">
	<RadioCard.Root align="center" defaultValue="fixed">
		<RadioCard.Label>Select contract type</RadioCard.Label>
		<HStack align="stretch">
			<RadioCard.Item
				label="Fixed Rate"
				value="fixed"
				icon={CurrencyDollar}
			/>
			<RadioCard.Item
				label="Milestone"
				value="milestone"
				icon={TrendUp}
			/>
			<RadioCard.Item label="Hourly" value="hourly" icon={Clock} />
		</HStack>
	</RadioCard.Root>
</Box>

Colours Accessibility

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

<Box class="w-64">
	<VStack gap={6}>
		{#each colours as colour}
			<RadioCard.Root {colour} defaultValue="next">
				<RadioCard.Label>{colour}</RadioCard.Label>
				<HStack align="stretch">
					<RadioCard.Item label="Next.js" value="next" />
				</HStack>
			</RadioCard.Root>
		{/each}
	</VStack>
</Box>

Controlled Accessibility

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

<Box class="max-w-3xl">
	<VStack gap={4} align="start">
		<Text size="sm" class="text-fg-muted">
			Selected: {controlledValue}
		</Text>
		<RadioCard.Root
			bind:value={controlledValue}
			onValueChange={({ value }) => (controlledValue = value)}
		>
			<RadioCard.Label>Select framework</RadioCard.Label>
			<HStack align="stretch">
				{#each frameworks as item}
					<RadioCard.Item
						label={item.title}
						description={item.description}
						value={item.value}
					/>
				{/each}
			</HStack>
		</RadioCard.Root>
	</VStack>
</Box>

Disabled Accessibility

Use the disabled prop to disable the entire radio card group.

<Box class="max-w-3xl">
	<RadioCard.Root defaultValue="next" disabled>
		<RadioCard.Label>Select framework (disabled)</RadioCard.Label>
		<HStack align="stretch">
			{#each frameworks as item}
				<RadioCard.Item
					label={item.title}
					description={item.description}
					value={item.value}
				/>
			{/each}
		</HStack>
	</RadioCard.Root>
</Box>

Sizes Accessibility

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

<Box class="w-64">
	<VStack gap={8}>
		{#each radioCardSizes as size}
			<RadioCard.Root {size} defaultValue="next">
				<RadioCard.Label>size = ({size})</RadioCard.Label>
				<HStack align="stretch">
					<RadioCard.Item label="Next.js" value="next" />
				</HStack>
			</RadioCard.Root>
		{/each}
	</VStack>
</Box>

Vertical Layout Accessibility

Use the orientation="vertical" prop to stack cards vertically.

<Box class="w-64">
	<RadioCard.Root orientation="vertical" defaultValue="next">
		<RadioCard.Label>Select framework</RadioCard.Label>
		<VStack align="stretch">
			{#each frameworks as item}
				<RadioCard.Item
					label={item.title}
					description={item.description}
					value={item.value}
				/>
			{/each}
		</VStack>
	</RadioCard.Root>
</Box>

With Addon Accessibility

Use the addon prop to add content below the card body.

<Box class="max-w-3xl">
	<RadioCard.Root defaultValue="next">
		<RadioCard.Label>Select framework</RadioCard.Label>
		<HStack align="stretch">
			{#each frameworks as item}
				<RadioCard.Item
					label={item.title}
					description={item.description}
					value={item.value}
					addon="Some addon text"
				/>
			{/each}
		</HStack>
	</RadioCard.Root>
</Box>

With Icon Accessibility

Pass an icon component to display an icon above the label.

<Box class="max-w-3xl">
	<RadioCard.Root defaultValue="allow">
		<RadioCard.Label>Select permission</RadioCard.Label>
		<HStack align="stretch">
			<RadioCard.Item
				label="Allow"
				description="This user can access the system"
				value="allow"
				icon={ArrowRight}
			/>
			<RadioCard.Item
				label="Deny"
				description="This user will be denied access"
				value="deny"
				icon={Prohibit}
			/>
			<RadioCard.Item
				label="Lock"
				description="This user will be locked out"
				value="lock"
				icon={Lock}
			/>
		</HStack>
	</RadioCard.Root>
</Box>

Props

Prop	Type	Default	Description
`value`	`text`	-	The controlled value of the radio card group.
`size`	`sm \| md \| lg`	`md`	The size of the component.
`align`	`start \| center \| end`	`start`	The alignment of content within cards.
`colour`	`gray \| red \| orange \| yellow \| green \| teal \| blue \| cyan \| purple \| pink \| rose`	`indigo`	The colour of the component.
`orientation`	`horizontal \| vertical`	`horizontal`	Layout orientation of the items container.
`disabled`	`boolean`	`false`	Whether the component is disabled.
`class`	`text`	-	CSS class to apply to the component.