shadcn.io is not affiliated with official shadcn/ui
Input examples · Validation
Success State Input for React
A username field in a success state, with a green border and a confirmation.
Confirming a good value removes doubt. This example gives the Username input a success border and focus ring and shows Username is available under it, next to a CircleCheckIcon, in the theme's success color. Use it for availability checks, verified codes and other values your app has confirmed.
Preview
Installation
FAQ
How does the field turn green?
Classes on the input: border-success, plus focus-visible:border-success and focus-visible:ring-success/50 so the border and the ring stay green while it's focused.
Where does the green come from?
The theme's success color, the same token the other success states use, so it adapts to light and dark mode and to your theme.
How is the confirmation shown?
A FieldDescription with text-success, a CircleCheckIcon with aria-hidden and the text Username is available.
Is this a live availability check?
No. The value haydenbleasel and the message are fixed. Apply the classes and show the message when your own check passes.
Related
- Error State InputAn invalid email field with an error
- Warning State InputA password field in a warning 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