A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
Laborum esse cillum incididunt est dolore.
Ea laboris tempor laborum officia ea adipisicing exercitation.
Adipisicing est dolore velit magna dolor voluptate velit.
Tempor dolore Lorem exercitation id nisi aliquip elit.
Only new workspace members are required to use SSO. Existing members can still log in with other methods.
All workspace members are required to log in with SSO.
Last message sent an hour ago
621 users
Last message sent 2 weeks ago
1200 users
Last message sent 4 days ago
2740 Users
import { RadioGroup } from "@ngrok/mantle/radio-group";
<RadioGroup.Root defaultValue="comfortable">
<RadioGroup.Item className="py-1" value="default" id="simple-1">
<RadioGroup.Indicator />
<RadioGroup.ItemContent asChild>
<label htmlFor="simple-1">Default</label>
</RadioGroup.ItemContent>
</RadioGroup.Item>
<RadioGroup.Item className="py-1" value="comfortable" id="simple-2" disabled>
<RadioGroup.Indicator />
<RadioGroup.ItemContent asChild>
<label htmlFor="simple-2">Comfortable</label>
</RadioGroup.ItemContent>
</RadioGroup.Item>
<RadioGroup.Item className="py-1" value="compact" id="simple-3">
<RadioGroup.Indicator />
<RadioGroup.ItemContent asChild>
<label htmlFor="simple-3">Compact</label>
</RadioGroup.ItemContent>
</RadioGroup.Item>
</RadioGroup.Root>
<RadioGroup.ButtonGroup defaultValue="production">
<RadioGroup.Button value="development">Development</RadioGroup.Button>
<RadioGroup.Button value="staging">Staging</RadioGroup.Button>
<RadioGroup.Button value="production">Production</RadioGroup.Button>
</RadioGroup.ButtonGroup>
<RadioGroup.List defaultValue="comfortable">
<RadioGroup.ListItem value="default" disabled id="rli1">
<RadioGroup.Indicator />
<RadioGroup.ItemContent>
<label className="font-medium text-strong" htmlFor="rli1">Default</label>
<p className="text-body">Laborum esse cillum incididunt est dolore.</p>
</RadioGroup.ItemContent>
</RadioGroup.ListItem>
<RadioGroup.ListItem value="comfortable" id="rli2">
<RadioGroup.Indicator />
<RadioGroup.ItemContent>
<label className="font-medium text-strong" htmlFor="rli2">Comfortable</label>
<p className="text-body">Ea laboris tempor laborum officia ea adipisicing exercitation.</p>
</RadioGroup.ItemContent>
</RadioGroup.ListItem>
</RadioGroup.List>
<RadioGroup.Root className="grid grid-cols-1 gap-y-6 sm:grid-cols-3 sm:gap-x-4" defaultValue="existing">
<RadioGroup.Card className="flex" value="newsletter" id="radiocard-1">
<div className="flex-1">
<label htmlFor="radiocard-1" className="block text-sm font-medium text-strong">Newsletter</label>
<p className="mt-1 flex items-center text-sm text-gray-500">Last message sent an hour ago</p>
<p className="mt-6 text-sm font-medium">621 users</p>
</div>
<RadioGroup.Indicator />
</RadioGroup.Card>
</RadioGroup.Root>A group of radio items. Manages state so only one item can be selected at a time. Unstyled and simple.
All props from Headless UI RadioGroup, including:
A simple radio item. The conventional use-case for basic radio options. Must be a child of RadioGroup.Root.
The selection indicator for any radio item. By default, renders a circle that changes color when checked. Use as a child of RadioGroup.Item, RadioGroup.ListItem, or RadioGroup.Card.
Accepts a render-props function (context) => ReactNode as children for custom indicators. The context includes checked, disabled, focus, hover, and autofocus.
The content wrapper for any radio item. Wrap labels, descriptions, or other content inside.
All props from div, plus:
An inline group of radio buttons rendered as a horizontal segmented control. Use RadioGroup.Button as direct children.
Same props as RadioGroup.Root.
A radio button used inside RadioGroup.ButtonGroup for inline grouped radio options.
A group of radio list items with connected borders. Use RadioGroup.ListItem as direct children.
Same props as RadioGroup.Root.
A radio list item used inside RadioGroup.List for connected list-style radio options with borders and padding.
A radio card item with enhanced styling for card-based radio options.
A sandbox container for input elements composed within radio group items. Prevents default radio selection behavior when interacting with the input.