Radio

A form component that restricts users to selecting exactly one option from an associated button set.
For more information on this component configuration, visit Radix UI

Option 1

Option 2

Disabled

Use the disabled class to disable the component.

Option 1

Sizes

Use the radio-group-{size} class to control the component size.

Size values can include:smmdlg.

For more information on all available sizing utilities, visit Tailwind

Option 1

Option 2

Option 1

Option 2

Option 1

Option 2

Variants

Use the variant and palette classes to control the appereance of the component.

Variant values can include solidoutlinesurfacesubtlelink.
Color palettes can include primaryneutral. For extra palettes such as warning error and more, refer to the Colors section.

Customizing

globals.css


:root {
  --ex-radio-cursor: default;
 
  --ex-radio-gap-x-sm: calc(var(--spacing) * 2);
  --ex-radio-gap-x-md: calc(var(--spacing) * 2.5);
  --ex-radio-gap-x-lg: calc(var(--spacing) * 3);
 
  --ex-radio-radius-sm: 9999px;
  --ex-radio-radius-md: 9999px;
  --ex-radio-radius-lg: 9999px;
 
  --ex-radio-size-sm: calc(var(--spacing) * 4);
  --ex-radio-size-md: calc(var(--spacing) * 5);
  --ex-radio-size-lg: calc(var(--spacing) * 6);
 
  --ex-radio-indicator-font-size-sm: var(--text-lg);
  --ex-radio-indicator-font-size-md: var(--text-xl);
  --ex-radio-indicator-font-size-lg: var(--text-2xl);
 
  --ex-radio-label-font-family: var(--font-sans);
  --ex-radio-label-font-weight: var(--font-weight-semibold);
 
  --ex-radio-label-font-size-sm: var(--text-xs);
  --ex-radio-label-font-size-md: var(--text-sm);
  --ex-radio-label-font-size-lg: var(--text-base);
}

API

For more information on this component configuration, visit Radix UI

Radio Group

Element	Selector
`RadioGroup`	`.ex-radio-group`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`checked`	`boolean`	`false`
`defaultValue`	`string`
`disabled`	`boolean`	`false`
`loop`	`boolean`	`true`
`name`	`string`
`required`	`boolean`	`false`
`value`	`string`
`onValueChange`	`function`	`false`

Radio

Element	Selector
`Checkbox`	`.ex-radio`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`

Radio Control

Element	Selector
`Checkbox`	`.ex-radio-control`

Prop	Type	Default
`as`	`ElementType`	`button`
`asChild`	`boolean`	`false`
`disabled`	`boolean`	`false`
`required`	`boolean`	`false`
`value`	`string`

Radio Indicator

Element	Selector
`Checkbox`	`.ex-radio-indicator`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	`false`

Radio Label

Element	Selector
`Checkbox`	`.ex-radio-label`

Prop	Type	Default
`as`	`ElementType`	`label`
`asChild`	`boolean`	`false`