Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Label examples · Standard

Section Label for React

A larger, semibold label that heads a section of a form.

Framework
UI library

A caption scaled up to head a group of fields, such as Personal Information. The Label takes font-semibold text-base instead of the default small, medium-weight caption. For a group of related controls, a FieldSet with a FieldLegend from Field gives the heading its meaning as well.

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

How is this section label styled?

className="font-semibold text-base" on Label. The default caption is text-sm and font-medium, so this one is larger and heavier. The text is Personal Information.

Is this label a heading?

No. Label renders a label element with data-slot="label". It looks like a section title because of the classes. A heading is what screen readers list when people jump by heading.

Does this label belong to a control?

Not in this file. Nothing pairs this caption with a control. It is only the styled caption.

When should I use Field instead?

When one control needs a caption, a description, or an error. Field associates those for you. This demo is a single larger label, with no fields under it.

Does the label add space around the section?

No. The only classes are font-semibold and text-base. Space above or below the group belongs on the parent.

Does the label follow a right-to-left page?

Yes. The label is a flex row without physical left or right margins, so it follows its parent's direction.

All 8 label examples