Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Checkbox examples · Standard

With Subtitle and Description Checkbox for React

A checkbox with a Recommended subtitle beside its label and a description underneath.

Framework
UI library

Important settings sometimes need both a nudge and a reason. Here Security alerts has a muted Recommended beside the label and a sentence underneath about what the alerts cover. FieldContent stacks a baseline-aligned row (label and subtitle) over the FieldDescription, and the horizontal Field keeps the box level with the label. Use it for the few settings where both a recommendation and an explanation help people decide.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

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.

All 12 checkbox examples