Radio
A native radio input for mutually exclusive choices with support for uncontrolled fields, controlled state, and compact horizontal rows.
Installation
Default Value
Start with an uncontrolled radio set when the field can manage its own selected value until a form submits it. Share a name across options and preselect one with default-checked.
Preview
Notification Cadence
Pick how often release updates should be bundled for the customer success inbox.
Uncontrolled Field
Default selection: Weekly summary
Field name: notificationCadence
Use default-checked when the radios should keep their own state until form submission.
Controlled State
Use checked and onchange when other panels on the page need to stay in sync with the current selection.
Preview
Support Routing
Keep the selected tier in local state when the rest of the page needs the same value.
Selected Tier
{typeof selectedSupportTier === 'undefined' ? 'Priority' : getSupportTierDetails(selectedSupportTier).label}
{typeof selectedSupportTier === 'undefined' ? 'First response: 1 business hour' : getSupportTierDetails(selectedSupportTier).window}
{typeof selectedSupportTier === 'undefined' ? 'Channel: Email and Slack' : getSupportTierDetails(selectedSupportTier).channel}
{typeof selectedSupportTier === 'undefined' ? 'A strong fit when releases need faster triage and a shared path between product, ops, and support.' : getSupportTierDetails(selectedSupportTier).summary}
Horizontal Layout
Arrange radios in a compact row when the choices should read like a segmented control. Disabled items can stay visible while a feature is still shipping.
Preview
Workspace Layout
Keep horizontal options compact for toolbars and settings rows. Disabled items can stay visible while a feature is still shipping.