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 React, Ark UI does not send the invite.
Installation
Anatomy
Usage
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant="outline">Add Member</Button>
</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 className="w-full">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectGroup>
{roles.items.map((role) => (
<SelectItem item={role} key={role.value}>
{role.label}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
{/* The rest of the file is under Installation. */}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 asChild. The rest is on the Alert Dialog page.
Button
Sets 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.
