Components
Validation strip
Feedback about a whole form, where no single field is wrong.
The split adds up to 100%.
100%
Installation
npx shadcn@latest add https://ui.whoisroktim.lol/r/validation-strip.jsonNot a field error
Field has an error for "this input is wrong". This is
for the case where every input is individually valid and the set is not — "the
split adds up to 90%". No single field can own that message.
Render the valid state too
A form that only speaks when something is broken leaves you guessing whether it
checked at all. Valid renders in bg/success-tint, invalid in bg/error-tint,
and the invalid one announces itself with role="alert".
| Prop | Type | Default | Description |
|---|---|---|---|
| state | "valid" | "invalid" | — | Sets the tint, the ink and the announcement role. |
| message | string | — | Say what is wrong and what would fix it. |
| action | { label, onClick } | — | Usually a reset or a recalculate. |