shadcn.io is an independent project built on shadcn/ui
Notification Method is the caption. Under it: Choose how you want to be notified. The rows are Email, SMS, and Push Notification. Email starts selected.
It fits one choice among a few visible options. A compact segmented control is a Segment Group. On Vue, Ark UI does not deliver the message.
Installation
Anatomy
Usage
<FieldSet class="w-full max-w-md">
<FieldLegend variant="label">Notification Method</FieldLegend>
<FieldDescription>Choose how you want to be notified.</FieldDescription>
<RadioGroup defaultValue="email">
<Field orientation="horizontal">
<RadioGroupItem value="email">Email</RadioGroupItem>
</Field>
<Field orientation="horizontal">
<RadioGroupItem value="sms">SMS</RadioGroupItem>
</Field>
<Field orientation="horizontal">
<RadioGroupItem value="push">Push Notification</RadioGroupItem>
</Field>
</RadioGroup>
</FieldSet>FAQ
How does the group keep a single method selected?
Email, SMS, and Push Notification share one RadioGroup, so choosing one clears the others. defaultValue is email, which starts the group on Email.
What is the Notification Method line?
FieldDescription under the caption reads Choose how you want to be notified.
The caption is a FieldLegend with variant set to label, the quieter legend.
Where does the text for each method go?
The choice is the text inside RadioGroupItem. Each item sits in its own Field with orientation set to horizontal.
What values do the three options use?
The value on each item is email, sms, or push. defaultValue on RadioGroup uses those same strings.
API Reference
Field
Sets variant="label" and orientation="horizontal". The rest is on the Field page.
Radio Group
Sets defaultValue="email", value="email", value="sms" and value="push". The rest is on the Radio Group page.
