shadcn.io is an independent project built on shadcn/ui
Password is shown in the destructive color. On the same line, smaller text reads Password is too weak.
Put the error on the label when the field has failed and the message is short. A Field can place a longer error under the input instead. In Svelte, Ark UI does not check the password.
Installation
Anatomy
Usage
<Label class="text-destructive">Password<span class="ms-1 font-normal text-xs">• Password is too weak</span></Label>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.
API Reference
Label
No extra props in this demo. The rest is on the Label page.
