shadcn.io is an independent project built on shadcn/ui
Add New Contact slides up with Name, Email, and Phone fields, then Add Contact and Cancel. Email is an email field and Phone is a telephone field.
Use it for a short create flow on a phone. A longer form belongs on the page, or in a Dialog on a wide screen. In Solid, Ark UI does not submit the contact.
Installation
Anatomy
Usage
<Drawer>
<DrawerTrigger asChild={props => <Button {...props()} variant="outline">Add Contact</Button>} />
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Add New Contact</DrawerTitle>
<DrawerDescription>
Fill in the details below to add a new contact.
</DrawerDescription>
</DrawerHeader>
<FieldGroup class="p-4">
<Field>
<FieldLabel>Name</FieldLabel>
<Input placeholder="Enter name" type="text" />
</Field>
<Field>
<FieldLabel>Email</FieldLabel>
<Input placeholder="Enter email" type="email" />
</Field>
<Field>
<FieldLabel>Phone</FieldLabel>
<Input placeholder="Enter phone number" type="tel" />
</Field>
</FieldGroup>
<DrawerFooter>
<Button>Add Contact</Button>
<DrawerClose asChild={props => <Button {...props()} variant="outline">Cancel</Button>} />
</DrawerFooter>
</DrawerContent>
</Drawer>FAQ
Which fields does the form have?
Name, a text input; Email, type="email"; and Phone, type="tel". Each has a placeholder and sits in a Field inside a FieldGroup.
How are the labels tied to the inputs?
Each label and input share a Field, so the label names the input and clicking it focuses the field.
Does Add Contact submit anything?
Not yet: the fields aren't in a form and the button has no handler. Wrap the fields in a form, give the button type="submit", and close the drawer once the contact is saved:
Pass open to Drawer and read details.open in onOpenChange.
How does Cancel close the drawer?
It's a DrawerClose, so pressing it dismisses the drawer and drops what was typed.
asChild on DrawerClose receives props: spread them onto the button.
API Reference
Drawer
Sets asChild and props. The rest is on the Drawer page.
Button
Sets props and variant="outline". The rest is on the Button page.
Field
No extra props in this demo. The rest is on the Field page.
Input
Sets placeholder="Enter name", type="text", placeholder="Enter email", type="email", placeholder="Enter phone number" and type="tel". The rest is on the Input page.
