Create New Item Sheet for React

Item Name and Description are text inputs, and Price is type="number" with 0.00 as its placeholder. Each sits in a Field with its label.

It's wrapped in SheetClose, which closes the sheet when pressed. Use the same part for any button that should dismiss the panel. Pass your button to SheetClose with render.

No, it's a plain Button. Save the item, then close the sheet by controlling its open state: Pass open to Sheet; onOpenChange receives the next boolean.

They're in SheetFooter, which takes the free space above it with mt-auto, so the actions stay at the bottom of the panel however short the form is.

The button labeled Create New is the trigger, and its text is the accessible name. The Button goes in the render prop of SheetTrigger, and the label stays its child.

SheetTitle names the dialog for assistive tech, so every sheet renders one; hide it with sr-only when the design has no visible heading. It reads Create New Item, with Add a new item to your collection as the description.