Skip to content

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

Free

Section Label for React

The words Personal Information, set larger and semibold, as a heading for a section of a form.

Personal Information is a larger, semibold label. It stands alone, with no input beside it.

Use a section label to head a group of fields, such as personal information. A Field legend does the same job as the group's name. Base UI in React does not group the fields under it.

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

Anatomy

Label anatomy: label, control, text

Usage

<Label className="font-semibold text-base">Personal Information</Label>

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.

API Reference

Label

No extra props in this demo. The rest is on the Label page.

All 8 label examples