Inputs@knitui/components

Radio

Radio is a single-selection control. Use Radio.Group to manage a set of mutually exclusive options, Radio.Card for a card-style selection surface, and Radio.Indicator as a standalone visual indicator. variant controls how the active colour ramp is applied; size sets the circle metrics.

WebiOSAndroid7 style slots15 own props18 examples

Stories Source Tests Open in Storybook

import { Radio } from "@knitui/components";

Playground

Loading playground…

variantVisual style — filled fills the circle, outline keeps it transparent.

sizeControls the circle diameter.

label

description

error

disabled

false

labelPositionSide the label appears on.

Playground

<Radio
  label="Radio option"
  variant="filled"
  size="sm"
  disabled={false}
/>

Examples

Variants

Every visual variant side by side at the default size.

Loading example…

VariantsSource Storybook

Sizes

All seven sizes from xxs to xxl.

Loading example…

SizesSource Storybook

Theme

Theme changes the active accent ramp.

Loading example…

ThemeSource Storybook

Disabled

Disabled state — the control is visually dimmed and cannot be toggled.

Loading example…

DisabledSource Storybook

With Description

Label, description, and error message all together.

Loading example…

With DescriptionSource Storybook

With Error

An error message is shown below the label when error is set.

Loading example…

With ErrorSource Storybook

Label Left

Label positioned to the left of the circle.

Loading example…

Label LeftSource Storybook

Controlled

Controlled — the checked state is owned by the parent component.

Loading example…

ControlledSource Storybook

Group

Radio.Group — mutually exclusive selection managed by a surrounding group.

Loading example…

GroupSource Storybook

Group Controlled

Radio.Group in a controlled state — selection is owned by the parent.

Loading example…

Group ControlledSource Storybook

Group Disabled

A disabled Radio.Group prevents toggling any of its children.

Loading example…

Group DisabledSource Storybook

Group Read Only

A read-only Radio.Group keeps the selection visible but prevents changing it.

Loading example…

Group Read OnlySource Storybook

Card

Radio.Card — a card-shaped selection surface that wraps arbitrary content.

Loading example…

CardSource Storybook

Card Shadows

Radio.Card with the shadow elevation prop across the shadow ladder.

Loading example…

Card ShadowsSource Storybook

Indicator

Radio.Indicator — a standalone visual-only indicator not tied to any input.

Loading example…

IndicatorSource Storybook

Matrix

Full variant × size matrix for visual regression.

Loading example…

MatrixSource Storybook

Styles

Per-slot styles targets individual parts — here the circle and the label.

Loading example…

StylesSource Storybook

Props

Prop	Type	Default	Description
`aria-describedby`	`string \| undefined`	—	Ids of external description elements; merged with description/error ids.
`aria-label`	`string \| undefined`	—	Accessible label when no visible label is provided.
`aria-labelledby`	`string \| undefined`	—	Id of an external label element. Defaults to the visible label id.
`checked`	`boolean \| undefined`	—	Controlled checked state.
`defaultChecked`	`boolean \| undefined`	`false`	Uncontrolled initial checked state.
`description`	`ReactNode`	—	Description rendered below the label.
`disabled` system	`boolean \| undefined`	`false`	Disables the radio.
`error`	`ReactNode`	—	Error rendered below the description (string nodes get the error theme).
`icon`	`RadioIconComponent \| undefined`	`RadioIcon`	Inner glyph component for the checked state.
`iconColor`	`GetThemeValueForKey<"color"> \| OpaqueColorValue \| undefined`	—	Override the glyph colour (defaults to the variant-derived dot colour).
`id`	`string \| undefined`	—	Id for a11y bindings; auto-generated when omitted.
`label`	`ReactNode`	`Radio option`	Label content rendered next to the control.
`labelPosition`	`"left" \| "right" \| undefined` left · right	`'right'`	Side the label appears on.
`onChange`	`((checked: boolean) => void) \| undefined`	—	Called when the radio becomes checked.
`radius` system	`string \| number \| undefined`	—
`rootRef`	`Ref<TamaguiElement> \| undefined`	—	Ref of the root wrapper element.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`size` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined` xxs · xs · sm · md · lg · xl · xxl	`'md'`	Controls the circle diameter.
`styles` system	`SlotStyles<RadioStyles> \| undefined`	—	Uniform per-slot style passthrough — sugar over the composable parts. Own slots: `circle` (the round box) / `dot` / `icon` (the inner glyph); plus the inherited chrome slots `label` / `description` / `error` / `root` forwarded to the `InlineControl`.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`value`	`string \| undefined`	—	Value used to match against a surrounding `Radio.Group`.
`variant` system	`RadioVariant \| undefined` filled · outline	`'filled'`	Visual style — filled fills the circle, outline keeps it transparent.

Style slots

Every part of Radio can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`circle`	`styles={{ circle: { … } }}`
`description`	`styles={{ description: { … } }}`
`dot`	`styles={{ dot: { … } }}`
`error`	`styles={{ error: { … } }}`
`icon`	`styles={{ icon: { … } }}`
`label`	`styles={{ label: { … } }}`
`root`	`styles={{ root: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 495 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.