shadcn.io is an independent project built on shadcn/ui
The title is New Task. Task Name, Assignee, and Due Date are empty, and the date field is a date input. Save Draft is an outline button beside Create Task.
Use it when a form has two ways to finish. A Dialog is enough if those three fields should sit in the center. In Svelte, Ark UI does not save the draft.
Installation
Anatomy
Usage
<Sheet><SheetTrigger>{#snippet asChild(props)}<Button {...props()}>Create Task</Button>{/snippet}</SheetTrigger><SheetContent><SheetHeader><SheetTitle>New Task</SheetTitle><SheetDescription>Create a new task and assign it to a team member</SheetDescription></SheetHeader><FieldGroup class="gap-4 p-4"><Field><FieldLabel>Task Name</FieldLabel><Input placeholder="Enter task name" type="text" /></Field><Field><FieldLabel>Assignee</FieldLabel><Input placeholder="Select assignee" type="text" /></Field><Field><FieldLabel>Due Date</FieldLabel><Input type="date" /></Field></FieldGroup><SheetFooter><Button variant="outline">Save Draft</Button><Button>Create Task</Button></SheetFooter></SheetContent></Sheet>FAQ
Which fields does the task form have?
Task Name, Assignee and Due Date. Due Date uses type="date", so the browser shows its own date picker. Assignee is a text input here; a Combobox of team members fits better in a real app.
Do the buttons save anything?
Not in this demo: neither has a handler. Save the draft without closing, then create the task and close the sheet by controlling its open state:
Pass open to Sheet and read details.open in onOpenChange.
How does the footer stay at the bottom?
SheetFooter takes the free space above it with mt-auto, so it sits at the bottom of the panel however short the form is.
API Reference
Sheet
No extra props in this demo. The rest is on the Sheet 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 task name", type="text", placeholder="Select assignee" and type="date". The rest is on the Input page.
