Skip to content
Primer Design System/React

Primer Design System

Site navigation

On this page

SelectPanel v2

  • Draft
  • Not reviewed for accessibility
On this page

A SelectPanel provides an anchor that will open an overlay with a list of selectable items, and a text input to filter the selectable items

Props

SelectPanel v2

NameTypeDefaultDescription
title Required
string

A descriptive title for the panel

description
string

When provided, a description is displayed below the title

selectionVariant
'multiple' | 'single' | 'instant'
multiple
onSubmit
(event: React.FormEvent) => void

Function that will be called when the panel is closed

onCancel
() => void

Function that will be called when the selection is submitted

onClearSelection
() => void

Function that will be called when the clear selection is selection

anchorRef
React.RefObject<HTMLButtonElement>

Useful for defining an external anchor

open
boolean
false

If defined, will control the open/closed state of the panel.

children
React.ReactNode[]

Recommended: SelectPanel.Button, SelectPanel.Header, ActionList, SelectPanel.Loading, SelectPanel.Message, SelectPanel.Footer

SelectPanel.Button

NameTypeDefaultDescription
children Required
React.ReactElement
Additional props are passed to the <Button> element. See Button docs for a list of props accepted by the <Button> element.

SelectPanel.Header

NameTypeDefaultDescription
children
React.ReactNode

Rendered before the list. Recommended: SelectPanel.SearchInput

SelectPanel.SearchInput

NameTypeDefaultDescription
onChange
React.ChangeEventHandler<HTMLInputElement>

Callback when input text changes, use this for search/filter

loading
boolean

Useful for subtle loading states while fetching items asynchronously

Additional props are passed to the <TextInput> element. See TextInput docs for a list of props accepted by the <TextInput> element.

SelectPanel.Footer

NameTypeDefaultDescription
children
React.ReactNode

Optional: <SelectPanel.SecondaryButton>

SelectPanel.Loading

NameTypeDefaultDescription
children
string

SelectPanel.Message

NameTypeDefaultDescription
variant
'warning' | 'error' | 'empty'
size
'inline' | 'full'
title
string

inline variant does not accept title

children
React.ReactNode

Status

Alpha

  • Component props and basic example usage of the component are documented on primer.style/react.
  • Component does not have any unnecessary third-party dependencies.
  • Component can adapt to different themes.
  • Component can adapt to different screen sizes.
  • Component has robust unit test coverage (100% where achievable).
  • Component has visual regression coverage of its default and interactive states.
  • Component does not introduce any axe violations.
  • Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.

Beta

  • Component is used in a production application.
  • Common usage examples are documented on primer.style/react.
  • Common usage examples are documented in storybook stories.
  • Component has been reviewed by a systems designer and any resulting issues have been addressed.
  • Component does not introduce any performance regressions.

Stable

  • Component API has been stable with no breaking changes for at least one month.
  • Feedback on API usability has been sought from developers using the component and any resulting issues have been addressed.
  • Component has corresponding design guidelines documented in the interface guidelines.
  • Component has corresponding Figma component in the Primer Web library.
  • Tooling (such as linters, codemods, etc.) exists to prevent further use of alternatives.