shadcn.io is an independent project built on shadcn/ui
The label is Project Name. The input starts as Untitled Project. Save does not rename anything.
One field can live here. A longer edit belongs in a Dialog. In Solid, Ark UI does not store the new name.
Installation
Anatomy
Usage
<AlertDialog>
<AlertDialogTrigger asChild={props => <Button {...props()} variant="outline">Rename</Button>} />
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Rename Project</AlertDialogTitle>
<AlertDialogDescription>
Enter a new name for your project.
</AlertDialogDescription>
</AlertDialogHeader>
<Field>
<FieldLabel>Project Name</FieldLabel>
<Input value="Untitled Project" name="project-name" placeholder="My Project" type="text" />
</Field>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogClose asChild={props => <AlertDialogAction {...props()}>Save</AlertDialogAction>} />
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>FAQ
Alert Dialog or Dialog for a rename?
An Alert Dialog suits a quick, committed edit: it stays open until people save or cancel. Use a Dialog for longer forms people may abandon.
Should the input show the current value?
Yes. defaultValue shows the current name, Untitled Project, so people edit rather than retype. Leave it empty for create flows.
Does the input get focus when it opens?
The dialog moves focus inside when it opens. To land on the input, give it autoFocus.
How do I validate the name?
Control the input and disable Save while it's empty or invalid, with a FieldError saying what to fix.
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 value="Untitled Project", name="project-name", placeholder="My Project" and type="text". The rest is on the Input page.
