Skip to content

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

Free

Multiple Inputs Dialog Alert Dialog for React

A feedback dialog with a Subject input and a Message textarea, plus Cancel and Send. Nothing is submitted.

Subject is a text input. Message is a textarea. Both have labels and placeholders. Cancel and Send are the buttons. Send does not post the feedback.

Two short fields can fit here. Past that, use a Dialog so people can leave without answering. In React, Base UI does not send the message.

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 Feedback
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Send Feedback</AlertDialogTitle>
      <AlertDialogDescription>
        Help us improve by sharing your thoughts.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <FieldGroup>
      <Field>
        <FieldLabel htmlFor="feedback-subject">Subject</FieldLabel>
        <Input
          id="feedback-subject"
          name="subject"
          placeholder="Brief description"
          type="text"
        />
      </Field>
      <Field>
        <FieldLabel htmlFor="feedback-message">Message</FieldLabel>
        <Textarea
          className="min-h-25"
          id="feedback-message"
          name="message"
          placeholder="Tell us more..."
        />
      </Field>
    </FieldGroup>
{/* The rest of the file is under 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.

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="feedback-subject" and htmlFor="feedback-message". The rest is on the Field page.

Input

Sets id="feedback-subject", name="subject", placeholder="Brief description" and type="text". The rest is on the Input page.

Textarea

Sets id="feedback-message", name="message" and placeholder="Tell us more...". The rest is on the Textarea page.

All 39 alert dialog examples