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 Vue, Ark UI does not send the invite.
Installation
Anatomy
Usage
<AlertDialog>
<AlertDialogTrigger :asChild="true">
<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 class="w-full"><SelectValue /></SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectItem v-for="role in roles.items" :item="role" :key="role.value">
{{ role.label }}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</Field>
</FieldGroup>
<AlertDialogFooter>
<!-- 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]", v-for="role in roles.items", item="role" and key="role.value". The rest is on the Select page.
