Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Field Group with Separator for Svelte

Responses and Tasks, two checkbox sections split by a plain rule. Responses push starts checked and cannot be turned off.

UI library: Ark 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 Svelte, Ark UI does not send the notifications.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Field anatomy: root, label, input, description, error

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 disabled /><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.

What is data-slot checkbox-group for?

The inner FieldGroup around each section's checkboxes sets data-slot to checkbox-group. The outer FieldGroup is the column that also holds the separator, capped with max-w-md.

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.

All 38 field examples