Radio Group
A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
Dev
Staging
Prod
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 {
RadioButton,
RadioButtonGroup,
RadioCard,
RadioGroup,
RadioGroupList,
RadioIndicator,
RadioItem,
RadioItemContent,
RadioListItem,
} from "@ngrok/mantle/radio-group";
<RadioGroup defaultValue="comfortable">
<RadioItem className="py-1" value="default" id="simple-1">
<RadioIndicator />
<RadioItemContent asChild>
<label htmlFor="simple-1">Default</label>
</RadioItemContent>
</RadioItem>
<RadioItem className="py-1" value="comfortable" id="simple-2" disabled>
<RadioIndicator />
<RadioItemContent asChild>
<label htmlFor="simple-2">Comfortable</label>
</RadioItemContent>
</RadioItem>
<RadioItem className="py-1" value="compact" id="simple-3">
<RadioIndicator />
<RadioItemContent asChild>
<label htmlFor="simple-3">Compact</label>
</RadioItemContent>
</RadioItem>
<RadioItem className="py-1" value="roomy" id="simple-4">
<RadioIndicator />
<RadioItemContent asChild>
<label htmlFor="simple-4">Roomy</label>
</RadioItemContent>
</RadioItem>
</RadioGroup>
<RadioButtonGroup defaultValue="production">
<RadioButton value="development">Development</RadioButton>
<RadioButton value="staging">Staging</RadioButton>
<RadioButton value="production">Production</RadioButton>
</RadioButtonGroup>
<RadioGroupList defaultValue="comfortable">
<RadioListItem value="default" disabled id="rli1">
<RadioIndicator />
<RadioItemContent>
<label className="font-medium text-strong" htmlFor="rli1">
Default
</label>
<p className="text-body">Laborum esse cillum incididunt est dolore.</p>
</RadioItemContent>
</RadioListItem>
<RadioListItem value="comfortable" id="rli2">
<RadioIndicator />
<RadioItemContent>
<label className="font-medium text-strong" htmlFor="rli2">
Comfortable
</label>
<p className="text-body">Ea laboris tempor laborum officia ea adipisicing exercitation.</p>
</RadioItemContent>
</RadioListItem>
<RadioListItem value="compact" id="rli3">
<RadioIndicator />
<RadioItemContent>
<label className="font-medium text-strong" htmlFor="rli3">
Compact
</label>
<p className="text-body">Adipisicing est dolore velit magna dolor voluptate velit.</p>
</RadioItemContent>
</RadioListItem>
<RadioListItem value="roomy" id="rli4">
<RadioIndicator />
<RadioItemContent>
<label className="font-medium text-strong" htmlFor="rli4">
Roomy
</label>
<p className="text-body">Tempor dolore Lorem exercitation id nisi aliquip elit.</p>
</RadioItemContent>
</RadioListItem>
</RadioGroupList>
<RadioGroup className="grid grid-cols-1 gap-y-6 sm:grid-cols-3 sm:gap-x-4" defaultValue="existing">
<RadioCard 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>
<RadioIndicator />
</RadioCard>
<RadioCard className="flex" value="existing" id="radiocard-2">
<div className="flex-1">
<label htmlFor="radiocard-2" className="block text-sm font-medium text-strong">
Existing Customers
</label>
<p className="mt-1 flex items-center text-sm text-gray-500">Last message sent 2 weeks ago</p>
<p className="mt-6 text-sm font-medium">1200 users</p>
</div>
<RadioIndicator />
</RadioCard>
<RadioCard className="flex" value="trial" id="radiocard-3">
<div className="flex-1">
<label htmlFor="radiocard-3" className="block text-sm font-medium text-strong">
Trial Users
</label>
<p className="mt-1 flex items-center text-sm text-gray-500">Last message sent 4 days ago</p>
<p className="mt-6 text-sm font-medium">2740 Users</p>
</div>
<RadioIndicator />
</RadioCard>
</RadioGroup>