shadcn.io is not affiliated with official shadcn/ui
Drawer examples · Bottom
Bottom Drawer with Form for React
A bottom drawer with name, email and phone fields for adding a contact.
A short form in a bottom drawer: Name, Email and Phone, with Add Contact and Cancel in the footer. Each field is a Field with its label, and the inputs use the right type, so phones show the email keyboard and the number pad.
Preview
Installation
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.
The FieldLabel points at its input with htmlFor and a matching id.
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; onOpenChange receives the next boolean.
How does Cancel close the drawer?
It's a DrawerClose, so pressing it dismisses the drawer and drops what was typed.
The Button goes in the render prop of DrawerClose.
Related
- Simple Bottom DrawerA bottom drawer with a title, a
- Signup Form DialogA sign-up dialog with name, email and
- Bottom Drawer Event DetailsA bottom drawer with an event's badges
- Input with LabelA text input with a label above it
- Simple Left DrawerA drawer that slides in from the left
- Bottom-Sliding SheetA sheet that slides up from the bottom of