shadcn.io is not affiliated with official shadcn/ui
Input examples · Validation
Warning State Input for React
A password field in a warning state, with an amber border and advice.
Not every problem should block a form. This example gives the password input a warning border and focus ring and shows Password is weak. Consider using a stronger password under it, next to a TriangleAlertIcon, in the theme's warning color. Use it for weak passwords, unusual values and other issues people can choose to ignore.
Preview
Installation
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.
Related
- Error State InputAn invalid email field with an error
- Success State InputA username field in a success state, with
- Real-time Validation InputA password field with a checklist of
- Password with Toggle InputA password field with a button that shows
- Input with LabelA text input with a label above it
- Simple Text Input FormA form with one username text input that