Skip to content

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

Free

Warning State Input for React

A Password field filled with weak123, a warning-colored border, and fixed advice to choose a stronger password. It is not marked invalid.

Password is filled with weak123. The border is in the warning color, and under the field a warning icon sits beside advice to use a stronger password. The field is not marked invalid.

Use it for a problem people may ignore, such as a weak password. If they cannot submit until it is fixed, show an error on the Field. In React, Base UI does not score this password.

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

Input anatomy: input, placeholder, value, caret

Usage

<Field className="w-full max-w-sm">
  <FieldLabel htmlFor="warning-password">Password</FieldLabel>
  <Input
    className="border-warning bg-background focus-visible:border-warning focus-visible:ring-warning/50"
    defaultValue="weak123"
    id="warning-password"
    placeholder="Enter password"
    type="password"
  />
  <FieldDescription className="flex items-center gap-2 text-warning">
    <TriangleAlertIcon aria-hidden="true" className="size-4 shrink-0" />
    Password is weak. Consider using a stronger password
  </FieldDescription>
</Field>

FAQ

How does the field turn amber?

Classes on the input: border-warning, plus focus-visible:border-warning and focus-visible:ring-warning/50 so the border and the ring keep the color while it's focused.

Where does the color come from?

The theme's warning color, so it adapts to light and dark mode and to your theme.

How is the advice shown?

A FieldDescription with text-warning, a TriangleAlertIcon with aria-hidden and the text of the advice.

Why not mark the field invalid?

A warning doesn't block submitting, so the field isn't invalid. Use invalid and FieldError for problems that must be fixed, as the Error State example does.

Is the password strength checked?

No. The value weak123 and the message are fixed. Show the warning from your own strength check.

How is Password tied to the field?

Clicking the label focuses the field, and screen readers announce it with the field. FieldLabel sets htmlFor to warning-password, the input's id.

API Reference

Field

Sets htmlFor="warning-password". The rest is on the Field page.

Input

Sets defaultValue="weak123", id="warning-password", placeholder="Enter password" and type="password". The rest is on the Input page.

All 24 input examples