Drawer

About the Drawer component

A Drawer component provides a flexible container for supplementary content. Unlike modals, drawers are less disruptive and allow users to maintain context with the page underneath.

Drawers can support multiple use cases such as:

• Quick detail panels
• Inline form interactions
• Step-by-step wizards

A Drawer should never be used to display complex or long-scrolling content that is better suited for a dedicated page.

Anatomy of a Drawer

• Header
  Contains a clear, descriptive title and a close (X) button. It may also include high-level actions such as “Save.” The header can be configured as sticky to remain visible when scrolling.

• Subheader (optional)
  A secondary section, typically with a light-gray background. This area is useful for displaying contextual information such as patient demographics or a patient selector. It helps anchor the user with relevant details before engaging with the main content.

• Body
  The primary content area of the drawer. This section holds the main interaction or information, such as forms, or step-based workflows

Built-in Drawer Features

• Exiting the Drawer: The Drawer can be closed via 3 ways: close button, esc key, and clicking outside the Drawer onto the scrim.
• Keyboard Trapping: Once inside the Drawer, users are keyboard trapped, meaning that they cannot navigate to any elements outside the Drawer. Users can access outside elements again by closing the Drawer.
• Focus on Open/Close: When the Drawer opens, focus will be on the close button. On close, the focus will return to the triggering element.

Drawer Sizes

Large screen (Desktop)

• Default / Minimum width: 500px
• Can expand up to 75% of the viewport width to maintain visibility of the overlay scrim and keep the page context.
• Maximum width: 1400px on large screens to prevent overextension and maintain a readable layout.

Medium screen

• Minimum width: 500px
• Can expand up to 75% of the viewport width to maintain visibility of the overlay scrim and keep the page context.
• Maximum width: 75% of the viewport width. Ensures the drawer doesn’t dominate the limited screen space while still allowing for sufficient content.

Small screen (Mobile)

• The drawer will open in full-screen mode (100% width and height of viewport) to optimize readability and interactions.

Guidance

When to use the drawer component

• You need to keep the user in the current context while presenting additional or related content.

• The action is complementary or secondary to the main task.

• You want to show a multi-step process without moving away from the underlying screen.

When to consider something else

• The interaction requires complete focus or must block all other actions; use a modal instead.

• The content is too complex or long-form and would benefit from full page navigation.

• The drawer is triggered frequently for trivial information—this can overwhelm the user experience.

Usability guidance

• Keep content concise. Use short, actionable text and clear labels.

• Limit complexity. Avoid placing complex forms or large amounts of information in a Drawer. For multi-step workflows, keep to two or three steps.

• Avoid nesting. Do not nest drawers within drawers; use alternative patterns if needed.

Accessibility

• Keyboard Navigation:
  • Ensure all interactive elements are reachable and operable via keyboard.
  • Maintain a logical and intuitive tab order within the drawer.