shadcn.io is an independent project built on shadcn/ui
Responses covers slow requests, such as research or image generation. Its Push notifications box is checked and disabled. A plain rule, then Tasks, with Push notifications, Email notifications, and a Manage tasks link.
Keep it when named groups only need a line between them. Put words on that line, or use a Separator outside a field. In Vue, Ark UI does not send the notifications.
Installation
Anatomy
Usage
<FieldGroup class="w-full max-w-md">
<FieldSet>
<FieldLegend variant="label">Responses</FieldLegend>
<FieldDescription>
Get notified when ChatGPT responds to requests that take time, like research or image generation.
</FieldDescription>
<FieldGroup data-slot="checkbox-group">
<Field orientation="horizontal">
<Checkbox :defaultChecked="true" :disabled="true" />
<FieldLabel class="font-normal">Push notifications</FieldLabel>
</Field>
</FieldGroup>
</FieldSet>
<FieldSeparator />
<FieldSet>
<FieldLegend variant="label">Tasks</FieldLegend>
<FieldDescription>
Get notified when tasks you've created have updates.{{ " " }}<a href="#">Manage tasks</a>
</FieldDescription>
<FieldGroup data-slot="checkbox-group">
<Field orientation="horizontal">
<Checkbox />
<FieldLabel class="font-normal">Push notifications</FieldLabel>
</Field>
<Field orientation="horizontal">
<Checkbox />
<FieldLabel class="font-normal">Email notifications</FieldLabel>
</Field>
</FieldGroup>
</FieldSet>
</FieldGroup>FAQ
What draws the line between Responses and Tasks?
FieldSeparator with no children sits between the two FieldSets, inside one FieldGroup. With nothing passed in, the separator is the rule.
What are the Responses and Tasks lines?
Each section has a FieldDescription under its caption. Responses explains notifications for requests that take time, such as research or image generation.
The caption is a FieldLegend with variant set to label.
Why can't Responses push be turned off?
That checkbox starts checked and is disabled, so it stays on. It sets defaultChecked and disabled. The Tasks checkboxes do not set either prop.
How are the checkbox rows built?
Each option is a horizontal Field: Checkbox first, then FieldLabel with font-normal. Tasks lists Push notifications and Email notifications.
API Reference
Field
Sets variant="label", data-slot="checkbox-group" and orientation="horizontal". The rest is on the Field page.
Checkbox
Sets defaultChecked and disabled. The rest is on the Checkbox page.
