Components / Library Version 5.14.0

Flyout

Flyouts are containers that slide in from the right on top of the content. They provide supplementary information and allow users to complete tasks without navigating away from the context of the underlying page or flow.

The width is adjustable (on smaller devices, the component is full width). Flyouts can optionally have action buttons in the footer.

For accessibility reasons, the component should always be rendered on the page, whether it is visible or not. The component itself should control whether the flyout is displayed or not; you should NOT conditionally render the component. See the Notes section for more information.

PropertiesExamplesAPIAccessibilityDesignNotes

* Required property

Properties of wm-flyout

heading *
string
Required. Sets the Flyout's heading text.
element-to-focus
primary | secondary | [Element id]

Determines the element focused when the flyout is opened. If an element in the flyout content should be focused, set this property to the id of the element.

If a footer button should receive focus, set this property to "primary" or "secondary".

If no value is passed, the flyout will automatically focus the close button.

eyebrow
string
Sets the Flyout's eyebrow text, displayed above the heading.
flyout-width
string
Sets the Flyout's width. Defaults to 720px. The Flyout has a max-width of 90% of the window. At browser window widths less than 534px, the max-width is 100%.
info-text
string
Sets the Flyout footer's info text, displayed in the lower left corner to provide additional feedback or information to the user.
open
boolean
Determines the open state of the Flyout. Defaults to false.
primary-text
string
If set, the Flyout footer contains a primary button with this text.
secondary-text
string
If set, the Flyout footer contains a secondary button with this text.
subheading
string
Sets the Flyout's subtitle text, displayed below the heading.

Usage in HTML

Edit the code below to see changes reflected in the example above.

Javascript Sample

Example code for functionality.

Usage in Elm

Code generated from HTML.

Events

wmFlyoutBreadcrumbClicked
Emitted when any breadcrumb button is triggered. The event.detail object has the format: { breadcrumb: (breadcrumbName), index: (breadcrumbIndex) }.
wmFlyoutCloseTriggered
Emitted when the close button is triggered, or the Escape key is pressed.
wmFlyoutPrimaryTriggered
Emitted when the primary button is triggered.
wmFlyoutSecondaryTriggered
Emitted when the secondary button is triggered.

Methods

focusHeading
Used to focus the heading of the flyout. Should be used when flyout content changes, to ensure focus is not lost and screen reader users are aware of the content change.

Screen Reader

The close button has the label and tooltip "Close". When the flyout is opened, the element specified by element-to-focus, or the close button if no element is specified, is focused.

Focus Management

When the Flyout is open, focus is trapped within it. Focusing forward past the last focusable element will wrap around to the first breadcrumb button (if present) or close button. Focusing back past the first focusable element will wrap around to the last footer button (if present) or the last focusable element in the flyout contents.

When the Flyout content is changed (via footer button or breadcrumb button), after the content changes are made, the Flyout heading should be focused using the focusHeading method. The heading element will have tabindex="-1", so it can be programmatically focused.

When the Flyout is closed, focus will automatically return to where it was before the flyout was opened.

Keyboard Support

Key Function
Escape Emits the wmFlyoutCloseTriggered event (to close the flyout).
Tab Moves focus to the next focusable element. If the user reaches the end of the flyout, focus will move to the first focusable element in the flyout (the first breadcrumb button if present, or the close button).
Shift + Tab Moves focus to the previous focusable element. If the user reaches the top of the flyout, focus will move to the last focusable element in the flyout (the last footer button if present, or the last focusable element in the flyout contents).

Aria Role, State, and Properties

  • The Flyout has the role dialog
  • Breadcrumbs are buttons rather than links, as they only update the Flyout content
  • The heading element has tabindex="-1" for programmatic focus when content changes

Here you will find documentation on anatomy and width behavior.

Anatomy

Example from Planning & Self Study aligning results to outcomes

Header

Flyout headers should clearly communicate the context and purpose of the flyout.

Example from Planning & Self Study using the breadcrumb to indicate there are multiple levels
Example from System Admin to edit organizations
  1. Breadcrumb - Flyouts can support multi-level navigation using bottom actions to move between views. Use breadcrumbs to help orient users, and use the title to describe the page's purpose in more detail. Limit flyout steps to no more than 3-5 steps to avoid confusing them as immersive view for more complex workflows.
  2. Title (required) - The title is required and should clearly describe the purpose of the flyout. Keep it concise and meaningful.
  3. Subtitle - The subtitle can be used to provide supporting details for the main title and briefly describe the page. For more complex information, use the description in the body content instead.
  4. Close Action - This action closes the flyout and returns to the page where it was launched from.
  5. Eyebrow Title - Use eyebrow titles to add context to the flyout, such as referencing the related feature or used category.

Body Content

The flyout body contains the content needed to complete the task or share important information with the user.

Example from Planning & Self Study aligning results to outcomes
  1. Form Required Message - When using a flyout for forms, display the "required" message exactly as shown centered above all form content in the body.
  2. Description - Use the description to further clarify the purpose of the flyout or guide the user on how to complete the task. It can be used instead of a subtitle.
  3. Supplemental Message - Use this area to include helpful supplemental information, such as the user's selection type or the number of items selected in the form. Keep it brief and easy to understand.
  4. Actions - Include actions when the flyout is meant for task completion. For informational flyouts, actions may not be necessary.

Footer

The footer includes actions to submit the form or move between steps. It can also show supplemental information to support task completion.

Example from Planning & Self Study aligning results to outcomes
  1. Supplemental Message - Use this area to include helpful supplemental information, such as the user's selection type or the number of items selected in the form. Keep it brief and easy to understand.
  2. Actions - Include actions when the flyout is meant for task completion. For informational flyouts, actions may not be necessary.

Width

Default Width

The flyout component has a default width of 720px, but it can be set to any fixed width, as needed. Product teams should set the width based on what makes sense for their specific content. We recommend not making it smaller than 480px or greater than 1272px.

Responsiveness

The component has a maximum width of 90% of the browser window to ensure it doesn't span the full width, helping users stay oriented to the original page. At widths smaller than the set flyout width, it will automatically adjust to fit the browser width. When the browser becomes less than 534px, the flyout shifts to be width and scales down with the browser.
  • The component should be rendered when the DOM loads in order for screen readers to detect the live region. Do NOT conditionally render the component based on whether the flyout should show or not; instead, render the component and toggle its open property.
  • By design the Flyout does not close when clicking outside of the Flyout area, therefore clicking outside of the Flyout area will not emit the close event. Users must explicitly use the close button or press the Escape key to close the flyout.
  • If the Flyout is part of a multi-step workflow, its content should only change as a result of user action (footer button or breadcrumb click). After the content is updated, the focusHeading method should be called to handle focus within the component.
  • On close the Flyout component handles returning focus to the element that initially opened it.
  • When using a flyout for forms, display the “required” message exactly as shown in the Design tab.
Back to Top