Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Label examples · Standard

Error Label for React

A label in the destructive color with an inline error message beside it.

Framework
UI library

Put the error on the same line as the caption when there is no room for a message under the field. The Label takes text-destructive, and a smaller, normal-weight span after the word Password says what's wrong: Password is too weak. Use it for short, inline validation such as password strength.

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

What does this error label render?

A Label with className="text-destructive", the word Password, and a span that reads "• Password is too weak". The span is ms-1 font-normal text-xs.

Why is the message lighter than the word Password?

Label is font-medium. The span sets font-normal and text-xs, and it inherits text-destructive from the label. The bullet is the first character of that span.

How does the message sit beside the caption?

Label is a flex row with gap-2. The span also adds ms-1, so the message starts a little further along the same line.

Does this label mark an input invalid?

No. The file has no input and no live region. The message is text inside the label, so a screen reader that reads the caption reads the sentence with it.

When should I use Field instead of this label?

When the error should sit with the control, under the input. Field ties the caption and the error to the field. This demo keeps the sentence inside the label.

How do I point this label at a password input?

Give the input an id and point the label at it, or wrap the input so the click focuses it. This file does neither. Set htmlFor to the input's id.

All 8 label examples