Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Form with Select Alert Dialog for React

An invite dialog with an email field and a role select that starts on Member, with Admin and Viewer as the other roles.

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, Base UI does not send the invite.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Alert Dialog anatomy: content, title, description, cancel, action

Usage

<AlertDialog>
  <AlertDialogTrigger render={<Button variant="outline" />}>
    Add Member
  </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 htmlFor="invite-email">Email Address</FieldLabel>
        <Input
          id="invite-email"
          name="email"
          placeholder="name@example.com"
          type="email"
        />
      </Field>
      <Field>
        <FieldLabel htmlFor="invite-role">Role</FieldLabel>
        <Select defaultValue="member" items={roles}>
          <SelectTrigger className="w-full" id="invite-role">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              {roles.map((role) => (
                <SelectItem key={role.value} value={role.value}>
{/* 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. The list goes to items and defaultValue is the role's value.

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.

Does Send Invite close the dialog?

Yes; send the invite in its click handler. On Base UI, AlertDialogAction is a plain button that leaves the dialog open: control open and set it to false in the action's handler.

API Reference

Alert Dialog

No extra props in this demo. The rest is on the Alert Dialog page.

Button

Sets variant="outline". The rest is on the Button page.

Field

Sets htmlFor="invite-email" and htmlFor="invite-role". The rest is on the Field page.

Input

Sets id="invite-email", name="email", placeholder="name@example.com" and type="email". The rest is on the Input page.

Select

Sets defaultValue="member", items={roles}, id="invite-role" and value={role.value}. The rest is on the Select page.

All 39 alert dialog examples