shadcn.io is not affiliated with official shadcn/ui
Alert Dialog examples · Form
Multiple Inputs Dialog Alert Dialog for React
An alert dialog with a subject input and a message textarea for sending feedback.
Feedback needs a subject and the details. This React alert dialog combines an Input and a Textarea, each with its label, for a quick two-field form. It's shadcn.io's Alert Dialog on Base UI with Field parts handling the spacing.
Preview
Installation
FAQ
How are the fields spaced?
A FieldGroup spaces the fields, and each Field keeps its label close to its control, so there's no need for margin utilities.
What order should the fields follow?
Required and most important first, details last: the subject, then the message.
How do I mark required fields?
Mark the optional ones instead, for example (optional) after the label, and disable Send until the required fields have values.
How tall should the textarea be?
Three or four lines, min-h-25 here. Taller pushes the buttons off small screens; people can still type more.
Does keyboard navigation work?
Yes. Tab goes from Subject to Message to Cancel to Send, in DOM order.
How many fields can an alert dialog hold?
Keep it to a few. Longer forms belong in a Dialog or a page, where people can take their time.
Related
- 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 Select Alert DialogAn alert dialog with an email input and a
- Simple TextareaA plain textarea with a placeholder and
- Form with Description Alert DialogAn alert dialog with one labeled input