shadcn.io is not affiliated with official shadcn/ui
Alert Dialog examples · Form
Form with Select Alert Dialog for React
An alert dialog with an email input and a role select for inviting a team member.
Inviting someone takes both free text and a fixed choice. This React alert dialog pairs an email Input with a role Select defaulting to Member. It's shadcn.io's Alert Dialog on Base UI with both controls in Field parts.
Preview
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.
Related
- Multiple Inputs Dialog Alert DialogAn alert dialog with a subject input and
- Form with Radio Group Alert DialogAn alert dialog with a radio group of
- Single Input Dialog Alert DialogAn alert dialog with one prefilled input
- Form with Validation State Alert DialogAn alert dialog whose input shows an
- Standard DialogA share dialog with a read-only link, a
- Form with Checkboxes Alert DialogAn alert dialog with checkboxes, each