shadcn.io is an independent project built on shadcn/ui
Full Name has an asterisk in the destructive color, and the placeholder asks for a full name. Under the field, the line says it is required.
Use it when the form cannot be sent without this value. The browser blocks an empty submit. Your own wording still belongs on the Field. In Vue, Ark UI does not supply that error text.
Installation
Anatomy
Usage
<Field class="w-full max-w-sm" :required="true">
<FieldLabel>
Full Name<span aria-hidden="true" class="text-destructive">*</span>
</FieldLabel>
<Input class="bg-background" placeholder="Enter your full name" type="text" />
<FieldDescription>* Required field</FieldDescription>
</Field>FAQ
How is the asterisk shown?
A span with text-destructive inside FieldLabel. It has aria-hidden, because the input's required state already tells assistive technology the field is required.
What does required do when the form is submitted?
The browser blocks the submit while the field is empty and shows its own message. Screen readers announce the field as required.
Why explain the asterisk?
Not everyone knows the convention. The description, * Required field, says it once; in a longer form, put the note at the top.
API Reference
Field
Sets required. The rest is on the Field page.
Input
Sets placeholder="Enter your full name" and type="text". The rest is on the Input page.
