Drawer Bottom 2 - Bottom drawer with form

Pro

Bottom drawer containing labeled inputs and submit for a compact form.
Shadcn Drawer Bottom 2 component

Component Data

  • ID:drawer/drawer-bottom-2
  • Access:pro
  • Created:Oct 5, 2025
  • Type:example

Drawer Bottom 2 component design & features

This bottom drawer places Label, Input, and Button fields inside DrawerContent with a submit action in DrawerFooter. The sheet height fits a small form without covering the entire viewport.

Form drawers work for add-item flows, quick edits, and mobile checkout steps where a full page is heavy. Keep field count low so users can complete the sheet in one gesture sequence.