# Drawers

## One-record drawer

<!-- rule: one-record -->

**Rule:** Open a drawer to view or change one record without leaving its list.

**Why:** Closing the drawer returns the user to the opened row.

**Do:** Open one for a quick edit, a new key, a filter, or a peek at a row’s detail.

**Don't:** Open one for a long form, several steps, or a view with its own address and Back.

**Except:** A two-answer question uses confirm, not a drawer.

## Drawer or page

<!-- rule: drawer-or-page -->

**Rule:** Use a page to edit more than one group, and a drawer for one short change.

**Why:** Several groups need room to move between them and check them before saving.

**Do:** Edit the roles and the per-unit switches on a page, under a way back to the list.

**Don't:** Edit the same groups in a drawer, stacked in one narrow panel over the list.

**Except:** Change one field inline, without a panel. A drawer may show groups a reader only reads.

## Grouped content

<!-- rule: no-cards -->

**Rule:** Group drawer content under headings and never put a card inside it.

**Why:** The drawer already provides the edge and raised surface, so cards add unnecessary boxes.

**Do:** Use three groups, with a heading over each group’s rows and one line between groups.

**Don't:** Put each group in a card inside the drawer.

## Header and group dividers

<!-- rule: three-lines -->

**Rule:** Add lines below the header and between groups. Leave the footer unfilled and without a rule.

**Why:** The header line marks the scrolling body; group lines separate content, and actions share the panel surface.

**Do:** Separate the header and groups.

**Don't:** Add dividers between every row.

## Spaced label rows

<!-- rule: rows -->

**Rule:** Put each value beside its label and separate rows with space.

**Why:** In a drawer up to 560px wide, labels and values stay together at any zoom without row lines.

**Do:** Place a short value beside its label, such as `Status — Active`.

**Don't:** Put the value at the far edge and use row lines to guide the eye back.

**Except:** Put figures readers compare down the panel, such as amounts, in a table using `table()` and right-align them.