Skip to content

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

Free

With Subtitle and Description Checkbox for Svelte

Security alerts, with a muted Recommended beside the label and a sentence under it about security updates and threats.

UI library: Ark UI

Security alerts has Recommended in muted text on the same line. Under that, a sentence covers security updates and threats to the account.

Keep both when a setting needs a nudge and a reason. If it should apply immediately, use a Switch instead of a box. On Svelte, Ark UI does not mark an option as recommended.

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

Checkbox anatomy: root, control, indicator, label

Usage

<Field class="max-w-sm" orientation="horizontal"><Checkbox name="security-alerts" /><FieldContent><div class="flex items-baseline gap-2"><FieldLabel>Security alerts</FieldLabel><span class="text-muted-foreground text-sm">Recommended</span></div><FieldDescription>Get notified about important security updates and potential threats to your account.</FieldDescription></FieldContent></Field>

FAQ

When should I use both subtitle and description?

When an option needs a quick qualifier and an explanation: the subtitle is the nudge (Recommended), the description is the reason. Keep it for settings that matter, like security or billing. Use only the subtitle, or only the description, when the other line would repeat it.

How does visual hierarchy work with subtitle and description?

The label is full-strength text, the subtitle is muted on the same line, and the description is muted on its own line below. People read the option's name first, then the qualifier, then the detail if they want it.

Do subtitle and description work well on mobile?

Yes, but each option takes more height. In a long list that adds scrolling, so give the full treatment only to the options that need it and keep the rest to a label.

How do I avoid subtitle and description saying the same thing?

Make the subtitle a category (Recommended, Optional, Pro) and the description the explanation. "Recommended" over "This is recommended" says nothing new; "Recommended" over what the alerts protect against does.

Can I adjust spacing between elements?

Yes. gap-2 on the row sets the space between label and subtitle, and FieldContent puts a small gap between that row and the description: add a gap-* class to FieldContent to change it. The field keeps the checkbox level with the label.

Is the full context accessible to screen readers?

The label is the checkbox's name; the subtitle and description are nearby text, read as people move through the page. To announce the description on focus, give it an id and set the checkbox's aria-describedby to it.

API Reference

Field

Sets orientation="horizontal". The rest is on the Field page.

Checkbox

Sets name="security-alerts". The rest is on the Checkbox page.

All 12 checkbox examples