shadcn.io is an independent project built on shadcn/ui
An Email Address label, a mail icon inside the field, and the placeholder you@example.com. The field is an email input.
Use it when you want the email keyboard and the browser's check on submit. Show a bad address on the Field, not with the icon alone. In Svelte, Ark UI does not invent its own email rule.
Installation
Anatomy
Usage
<Field class="w-full max-w-sm"><FieldLabel>Email Address</FieldLabel><InputGroup class="bg-background"><InputGroupInput placeholder="you@example.com" type="email" /><InputGroupAddon><MailIcon aria-hidden="true" /></InputGroupAddon></InputGroup></Field>FAQ
What does type email give this field?
The browser checks that the value looks like an address when the form is submitted, and mobile keyboards show the @ key. The placeholder you@example.com shows the expected shape.
How is the icon placed inside the field?
The field is an InputGroup: InputGroupInput is the input and InputGroupAddon holds MailIcon. The addon comes after the input in the markup and sits at the inline start, so it is on the left in left-to-right text and on the right in right-to-left text. Clicking it focuses the input.
Is the icon read by screen readers?
No. MailIcon has aria-hidden, because the Email Address label already names the field. The icon is a visual hint only.
How is Email Address tied to the field?
Clicking the label focuses the field, and screen readers announce it with the field.
Field links FieldLabel to the input inside it, so there is no id to match.
API Reference
Field
No extra props in this demo. The rest is on the Field page.
Input Group
Sets placeholder="you@example.com" and type="email". The rest is on the Input Group page.
