Skip to content
Patternfly Logo

Context selector

Examples

Basic

Plain with text

Props

ContextSelector

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullcontent rendered inside the Context Selector
classNamestring''Classes applied to root element of Context Selector
disableFocusTrapbooleanfalseFlag to disable focus trap
footerReact.ReactNodenullFooter of the context selector
idstringId of the context selector
isFlipEnabledbooleanfalseFlag for indicating that the context selector menu should automatically flip vertically when it reaches the boundary. This prop can only be used when the context selector component is not appended inline, e.g. `menuAppendTo="parent"`
isFullHeightbooleanFlag indicating that the context selector should expand to full height
isOpenbooleanfalseFlag to indicate if Context Selector is opened
isPlainbooleanfalseFlag to indicate the toggle has no border or background
isTextbooleanfalseFlag to indicate if toggle is textual toggle
menuAppendToHTMLElement | (() => HTMLElement) | 'inline' | 'parent''inline'The container to append the menu to. Defaults to 'inline'. If your menu is being cut off you can append it to an element higher up the DOM tree. Some examples: menuAppendTo="parent" menuAppendTo={() => document.body} menuAppendTo={document.getElementById('target')}
onSearchButtonClick(event?: React.SyntheticEvent<HTMLButtonElement>) => void() => undefined as anyFunction callback for when Search Button is clicked
onSearchInputChange(value: string) => void() => undefined as anyFunction callback called when user changes the Search Input
onSelect(event: any, value: React.ReactNode) => void() => undefined as anyFunction callback called when user selects item
onToggle(event: any, value: boolean) => void() => undefined as anyFunction callback called when user clicks toggle button
ouiaSafeNo type infotrue
screenReaderLabelstring''Labels the Context Selector for Screen Readers
searchButtonAriaLabelstring'Search menu items'Aria-label for the Context Selector Search Button
searchInputPlaceholderstring'Search'Search Input placeholder
searchInputValuestring''Value in the Search field
toggleTextReact.ReactNode''Component or string that will be used in the context selector. This prop is placed in a button, and cannot contain any interactive elements

ContextSelectorItem

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullAnything which can be rendered as Context Selector item
classNamestring''Classes applied to root element of the Context Selector item
hrefstringnullLink href, indicates item should render as anchor tag
isDisabledbooleanfalseRender Context Selector item as disabled
onClick(event: React.MouseEvent) => void(): any => undefinedCallback for click event
sendRef(index: number, current: any) => void() => {}Internal callback for ref tracking

ContextSelectorFooter

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the ContextSelectorFooter
classNamestring''Additional classes added to the ContextSelectorFooter

View source on GitHub