shadcn.io is an independent project built on shadcn/ui
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 Solid, Ark UI does not send the message.
Installation
Anatomy
Usage
<AlertDialog>
<AlertDialogTrigger asChild={props => <Button {...props()} variant="outline">Add Feedback</Button>} />
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Send Feedback</AlertDialogTitle>
<AlertDialogDescription>
Help us improve by sharing your thoughts.
</AlertDialogDescription>
</AlertDialogHeader>
<FieldGroup>
<Field>
<FieldLabel>Subject</FieldLabel>
<Input name="subject" placeholder="Brief description" type="text" />
</Field>
<Field>
<FieldLabel>Message</FieldLabel>
<Textarea class="min-h-25" name="message" placeholder="Tell us more..." />
</Field>
</FieldGroup>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogClose asChild={props => <AlertDialogAction {...props()}>Send</AlertDialogAction>} />
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>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
Sets asChild and props. The rest is on the Alert Dialog page.
Button
Sets props and 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="subject", placeholder="Brief description" and type="text". The rest is on the Input page.
Textarea
Sets name="message" and placeholder="Tell us more...". The rest is on the Textarea page.
