Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Label examples · Standard

Label with Description for React

A label with a line of muted helper text under it.

Framework
UI library

A caption that needs a sentence of context, such as what a username is used for. The Label says Username and a small muted paragraph under it says This will be your public display name. Inside a form, Field with FieldDescription does the same and ties the hint to the control.

Preview

Preview width

This will be your public display name

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

Where does the helper text sit?

Under the label, in a p. The wrapper is flex flex-col gap-1. The label says Username. The paragraph says "This will be your public display name".

How is the helper text styled?

text-muted-foreground text-xs on the paragraph. Label keeps the default text-sm font-medium caption. The paragraph is a sibling of the label, not a child of it.

What is the space between the label and the hint?

gap-1 on the column. The file does not use a space-y class.

Is the paragraph announced with an input?

No. There is no input and no aria-describedby. Field is the part that associates a caption and a description with the control. This demo is the label and the paragraph only.

How do I point the Username label at an input?

Give the input an id and point the label at it. The hint can stay the paragraph under the label. Set htmlFor to the input's id.

How long is the hint in this file?

One line: "This will be your public display name". The paragraph wraps if the column is narrower than that sentence. text-xs is the only size class on it.

All 8 label examples