Radio

Choose one option from a mutually exclusive group when all choices should remain visible.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Radio to choose one option from a group. Use Checkbox for multiple selections and Segmented for segmented parameter choices. Give the group and each option an accessible name.

Bind the same group state and give each Radio a distinct, stable value. Use null when there is no initial selection.
The current option can be deselected, which writes undefined. Do not assume a selected option can never be cleared. Provide a readable label.

Import

import { Radio } from '@snowui-design-system/components';

Usage

States

Selection

Sizes

Disabled

Variants

API Reference

Property	Type	Default	Example	Description
`checked`	`boolean`	`false`	`bind:checked={selected}`	For a standalone Radio, bind:checked controls selection. Clicking or pressing Space toggles it, and repeating the action clears it. Within a group, selection is determined by whether group strictly equals value.
`group`	`any`	`—`	`bind:group={selected}`	Bind the same group state to each Radio and provide distinct values. Initialize it to a selected value or null for no selection. Deselecting the current option writes undefined; subsequent group synchronization still works.
`value`	`any`	`—`	`value="Components"`	Value for this option, compared with group using strict equality. Use a unique, stable value for every option in a group.
`size`	`ResourceSize \| number`	`—`	`size={42}`	Control layout size. Accepts 12, 16, 20, 24, 28, 32, 40, 48, 80, or a custom number. Inherits size context when omitted; otherwise defaults to 16. The graphic takes 87.5% of this size without changing label text size.
`disabled`	`boolean`	`false`	`disabled`	Prevent clicks and keyboard toggling and remove the control from Tab order, while retaining its selection state.
`variant`	`"outline" \| "filled"`	`"filled"`	`variant="outline"`	filled uses a thick selected ring; outline uses a thin outline and center dot. Both have the same selection behavior.
`children`	`Snippet`	`—`	`<Radio>Components</Radio>`	Label beside the circular control; can combine a title and description. A readable label is recommended.
`singleLine`	`boolean`	`true`	`singleLine`	Labels and controls use one line by default, with stable attachments. A constrained label may show an ellipsis while retaining its complete accessible name and original children. Set false for complex multiline content. Compose Text lines={1} for a full-text tooltip.
`gap`	`number`	`—`	`gap={42}`	Inherited Frame gap token index. Omit it for the original component gap; explicit values override the preferred gap. Effective spacing stays at least 4 CSS px, including zero and root-font or gap-scale reductions. Larger preferred gaps are preserved.
`enableResponsive`	`boolean`	`false`	`enableResponsive`	Responsive capability passed to Frame; layout follows Frame’s responsive configuration.
`enableContext`	`boolean`	`false`	`enableContext`	General context capability passed to Frame. It does not control how Radio reads its own size context or Image badge context.