Radio Group
A set of mutually exclusive choices with support for uncontrolled fields, controlled state, and horizontal layouts.
Installation
Default Value
Start with an uncontrolled radio group when the field can manage its own selected value until a form submits it.
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-value when the group should keep its own state until form submission.
Controlled State
Use value and on-value-change 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
Switch to orientation="horizontal" when the choices should read like a compact segmented control.
Preview
Workspace Layout
Keep horizontal options compact for toolbars and settings rows. Disabled items can stay visible while a feature is still shipping.