Radio Card

A form component that adapts exclusive radio selection mechanisms into larger, data-rich card layouts.
For more information on this component configuration, visit Radix UI

Disabled

Use the disabled attr or the disabled class to disable a component.

Controlled

Use the value and onValueChange props when you need to control the value externally.

Uncontrolled

Use the name prop to include the value in the form submission.

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

Variants

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

Variant values can include solidoutlinesurfacesubtle.
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-card-cursor: default;
 
  --ex-radio-card-gap-x-sm: calc(var(--spacing) * 2);
  --ex-radio-card-gap-x-md: calc(var(--spacing) * 2.5);
  --ex-radio-card-gap-x-lg: calc(var(--spacing) * 3);
 
  --ex-radio-card-px-sm: calc(var(--spacing) * 4);
  --ex-radio-card-px-md: calc(var(--spacing) * 5);
  --ex-radio-card-px-lg: calc(var(--spacing) * 6);
 
  --ex-radio-card-py-sm: calc(var(--spacing) * 4);
  --ex-radio-card-py-md: calc(var(--spacing) * 5);
  --ex-radio-card-py-lg: calc(var(--spacing) * 6);
 
  --ex-radio-card-radius-sm: var(--radius-sm);
  --ex-radio-card-radius-md: var(--radius-sm);
  --ex-radio-card-radius-lg: var(--radius-sm);
 
  --ex-radio-card-content-gap-x-sm: calc(var(--spacing) * 2);
  --ex-radio-card-content-gap-x-md: calc(var(--spacing) * 2.5);
  --ex-radio-card-content-gap-x-lg: calc(var(--spacing) * 3);
 
  --ex-radio-card-content-gap-y-sm: calc(var(--spacing) * 1);
  --ex-radio-card-content-gap-y-md: calc(var(--spacing) * 1.25);
  --ex-radio-card-content-gap-y-lg: calc(var(--spacing) * 1.5);
 
  --ex-radio-card-label-font-family: var(--font-sans);
  --ex-radio-card-label-font-weight: var(--font-weight-medium);
 
  --ex-radio-card-label-font-size-sm: var(--text-xs);
  --ex-radio-card-label-font-size-md: var(--text-sm);
  --ex-radio-card-label-font-size-lg: var(--text-base);
 
  --ex-radio-card-label-line-height-sm: var(--text-xs--line-height);
  --ex-radio-card-label-line-height-md: var(--text-sm--line-height);
  --ex-radio-card-label-line-height-lg: var(--text-base--line-height);
 
  --ex-radio-card-description-font-family: var(--font-sans);
  --ex-radio-card-description-font-weight: var(--font-weight-normal);
  --ex-radio-card-description-opacity: var(--ex-options-opacity-muted);
 
  --ex-radio-card-description-font-size-sm: var(--text-xs);
  --ex-radio-card-description-font-size-md: var(--text-sm);
  --ex-radio-card-description-font-size-lg: var(--text-base);
 
  --ex-radio-card-description-line-height-sm: var(--text-xs--line-height);
  --ex-radio-card-description-line-height-md: var(--text-sm--line-height);
  --ex-radio-card-description-line-height-lg: var(--text-base--line-height);
 
  --ex-radio-card-indicator-font-size-sm: var(--text-base);
  --ex-radio-card-indicator-font-size-md: var(--text-lg);
  --ex-radio-card-indicator-font-size-lg: var(--text-xl);
}

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`

Radio Card

Element	Selector
`RadioCard.Indicator`	`.ex-radio-card`

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

Radio Card Indicator

Element	Selector
`RadioCard.Indicator`	`.ex-radio-card-indicator`

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

Radio Card Content

Element	Selector
`RadioCard.Content`	`.ex-radio-card-content`

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

Radio Card Label

Element	Selector
`RadioCard.Label`	`.ex-radio-card-label`

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

Radio Card Description

Element	Selector
`RadioCard.Description`	`.ex-radio-card-description`

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