shadcn.io is an independent project built on shadcn/ui
Email is empty. The role select offers Admin, Member, and Viewer, and starts on Member. Send Invite does not send mail.
Use a select for a fixed list of roles. Two options can be radios. Once the form grows, use a Dialog. In Svelte, Ark UI does not send the invite.
Installation
Anatomy
Usage
<AlertDialog><AlertDialogTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline">Add Member</Button>{/snippet}</AlertDialogTrigger><AlertDialogContent><AlertDialogHeader><AlertDialogTitle>Invite Team Member</AlertDialogTitle><AlertDialogDescription>Add a new member to your team with a specific role.</AlertDialogDescription></AlertDialogHeader><FieldGroup><Field><FieldLabel>Email Address</FieldLabel><Input name="email" placeholder="name@example.com" type="email" /></Field><Field><FieldLabel>Role</FieldLabel><Select collection={roles} defaultValue={["member"]}><SelectTrigger class="w-full"><SelectValue /></SelectTrigger><SelectContent><SelectGroup>{#each roles.items as role (role.value)}<SelectItem item={role}>{role.label}</SelectItem>{/each}</SelectGroup></SelectContent></Select></Field></FieldGroup><AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogClose>{#snippet asChild(props)}<AlertDialogAction {...props()}>Send Invite</AlertDialogAction>{/snippet}</AlertDialogClose></AlertDialogFooter></AlertDialogContent></AlertDialog>FAQ
Should the select come before or after the input?
After it. Ask for the specific detail, the email, before the categorization, the role.
Should the select have a default?
Yes, the most common choice: Member here. A Please select placeholder only adds a click for most people.
How are the roles passed?
From a static list at module scope. It's a collection made with createListCollection, passed to collection, and defaultValue is an array.
How do I make both fields required?
Keep the default role so the select always has a value, and disable Send Invite until the email is valid.
Does the select's list work inside the dialog?
Yes. It opens in a layer above the dialog and keeps focus inside it. Keep the list short; for many options use a Combobox with search.
API Reference
Alert Dialog
Sets props. The rest is on the Alert Dialog 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 name="email", placeholder="name@example.com" and type="email". The rest is on the Input page.
Select
Sets collection={roles}, defaultValue={["member"]} and item={role}. The rest is on the Select page.
