Drawer
Drawerは、画面の端からスライドインするパネルコンポーネントです。ナビゲーション、設定、詳細情報、フォームなどのサブコンテンツを表示するのに適しています。
4
Sides
5
Sizes
Built-in
Scroll
Radix
Base
Playground
Preview
MDRight
Drawer
Side
Size
Content
Options
Button Style
Cancel
Save
const [open, setOpen] = useState(false)
<Drawer open={open} onOpenChange={setOpen}>
<Drawer.Trigger asChild>
<Button variant="outline">Open Drawer</Button>
</Drawer.Trigger>
<Drawer.Content>
<Drawer.Header>
<Drawer.Title>Drawer Title</Drawer.Title>
<Drawer.Description>This is a description of the drawer.</Drawer.Description>
</Drawer.Header>
<Drawer.Body>
<p>This is a drawer panel. You can place any content here, including navigation, forms, or detail views.</p>
</Drawer.Body>
<Drawer.Footer>
<Drawer.Close asChild>
<Button variant="ghost" size="md" pressEffect={false}>Cancel</Button>
</Drawer.Close>
<Button size="md" pressEffect={false}>Save</Button>
</Drawer.Footer>
</Drawer.Content>
</Drawer>Sizes
smサイドパネル・設定Left/Right: width320px
Top/Bottom: height320px
md (default)標準(デフォルト)Left/Right: width400px
Top/Bottom: height400px
lg複雑なフォームLeft/Right: width480px
Top/Bottom: height480px
xl詳細コンテンツLeft/Right: width640px
Top/Bottom: height640px
fullフルサイズLeft/Right: width100%
Top/Bottom: height100%
パディング(全サイズ共通)
Header24px (下 0)
Body24px
Footer24px (上 0)
Closeright 16px, top 16px
| Size | 左/右 | 上/下 | 用途 |
|---|---|---|---|
sm | width: 320px | height: 320px | サイドパネル・設定 |
md | width: 400px | height: 400px | 標準(デフォルト) |
lg | width: 480px | height: 480px | 複雑なフォーム |
xl | width: 640px | height: 640px | 詳細コンテンツ |
full | width: 100% | height: 100% | フルサイズ |
パディング — 全サイズ共通
Header
p-6 pb-0
24px, bottom 0
Body
p-6
24px
Footer
p-6 pt-0
24px, top 0
Close
right-4 top-4
16px
Features
Side Placement
4方向(left、right、top、bottom)からスライドインできます。デフォルトは right です。
<Drawer.Content side="left">...</Drawer.Content>
<Drawer.Content side="right">...</Drawer.Content>
<Drawer.Content side="top">...</Drawer.Content>
<Drawer.Content side="bottom">...</Drawer.Content>API
Component Structure
Drawer— Radix Dialog.Trigger.ContentProps.Header.Title.Description.Body.Footer.CloseProps.Overlay.Portal
.Triggerトリガー要素.ContentPropsパネル(side・size・close).Headerヘッダー領域.Titleタイトル(aria-labelledby).Description補足テキスト(aria-describedby).Bodyコンテンツ領域(スクロール対応).Footerアクション領域.CloseProps閉じるボタン.Overlay背景オーバーレイ.PortalポータルProps
Drawer.Content
side"right""left" | "right" | "top" | "bottom"スライド方向
size"md""sm" | "md" | "lg" | "xl" | "full"パネルサイズ(左右は幅、上下は高さ: 320/400/480/640/full)
showCloseButtontrueboolean内蔵の閉じるボタンを表示
closeIconBuilt-in SVG iconReactNodeカスタム閉じるアイコン
| Name | Type | Default | Description |
|---|---|---|---|
side | "left" | "right" | "top" | "bottom" | "right" | スライド方向 |
size | "sm" | "md" | "lg" | "xl" | "full" | "md" | パネルサイズ(左右は幅、上下は高さ: 320/400/480/640/full) |
showCloseButton | boolean | true | 内蔵の閉じるボタンを表示 |
closeIcon | ReactNode | Built-in SVG icon | カスタム閉じるアイコン |
Drawer.Close
asChildfalseboolean子要素をトリガーとして使用
| Name | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | 子要素をトリガーとして使用 |
Anatomy
1
2
3
4
Drawer title
5
6
7
1
Overlay
背景オーバーレイ
2
Content
サイドパネル本体
3
Header
タイトル領域
4
Title
見出しテキスト
5
Close
閉じるボタン
6
Body
メインコンテンツ
7
Footer
アクションボタン
Best Practices
✓
推奨
- ✓サブコンテンツやセカンダリナビゲーションにDrawerを使用する
- ✓メインコンテンツの文脈を保つ必要がある場合にDrawerを選択する
- ✓適切なsideをコンテンツの用途に合わせて選択する(ナビ→left、詳細→right)
- ✓Footerにアクションボタンを配置して操作を明確にする
✕
避けるべき
- ✕重要な確認ダイアログにDrawerを使わない — Modalを使用する
- ✕Drawerの中にDrawerをネストしない
- ✕大量のステップを持つウィザードにDrawerを使わない — 専用ページに遷移する
- ✕fullサイズを安易に使わない — モバイルではフルスクリーンに見えてしまう
Accessibility
キーボード操作
EscDrawerを閉じる
TabDrawer内でフォーカス循環
ARIA / WCAG
role="dialog"Radix自動付与aria-labelledbyTitle連携aria-describedbyDescription連携aria-modal="true"Radix自動付与- オーバーレイクリックで閉じる
- 背景スクロールロック