Popover

When to use

• Use a popover when the user needs to access a small set of controls or options related to their current task
• Use a popover to present filtering controls, such as a checkbox group or radio group, triggered by a filter chip

When not to use

• If the task requires the user's full attention or involves complex content such as a full form or navigation menu, use a modal panel instead. A popover is for lightweight interactions that supplement what is already on screen

How it works

A popover appears anchored to the element that triggered it, typically a filter chip. It positions itself relative to the trigger so the user can see which element it belongs to.

Clicking or tapping outside the popover closes it. The popover does not take over the screen or block interaction with elements outside its bounds in the same way a modal does.

Accessibility

This component is designed with accessibility built in:

• The popover is associated with its trigger element so screen readers understand the relationship
• Colour contrast meets requirements across all states and both themes

When implementing, verify:

• Focus moves into the popover when it opens and returns to the trigger when it closes
• The popover content is reachable by keyboard (Tab navigates through interactive elements inside it)
• If the popover contains a group of related controls, an appropriate group label is provided

Resources

• Figma
• Storybook