Drawer

Panel sliding in from an edge. Focus is trapped inside, Escape closes, and focus returns to the trigger.

Example

<Button data-ink-drawer="#demo">Open filters</Button>
<Drawer id="demo" label="Filters">
  <TextField id="drawer-q" label="Keyword" />
  <Button type="button">Apply</Button>
</Drawer>

Sides

Pass side="left" | "right" | "bottom". Sheet is the bottom variant with the same API.

Events

document.addEventListener("ink:drawer:open", (event) => {
  console.log(event.target.id);
});

Props

Prop	Type	Default	Description
`id`	`string`	-	Targeted by `data-ink-drawer="#id"` triggers.
`label`	`string`	-	Dialog landmark name.
`side`	`left \| right \| bottom`	`right`	Slide edge.

Accessibility

Focus trap via the shared helper; backdrop click and Escape both close.
Focus returns to the trigger; body scroll locks while open.