Context selector

Examples

Basic

Plain with text

Props

ContextSelector

*required
Name	Type	Default	Description
children	React.ReactNode	null	content rendered inside the Context Selector
className	string	''	Classes applied to root element of Context Selector
disableFocusTrap	boolean	false	Flag to disable focus trap
footer	React.ReactNode	null	Footer of the context selector
isFullHeight	boolean		Flag indicating that the context selector should expand to full height
isOpen	boolean	false	Flag to indicate if Context Selector is opened
isPlain	boolean	false	Flag to indicate the toggle has no border or background
isText	boolean	false	Flag to indicate if toggle is textual toggle
menuAppendTo	No type info	'inline'
onSearchButtonClick	(event?: React.SyntheticEvent<HTMLButtonElement>) => void	() => undefined as any	Function callback for when Search Button is clicked
onSearchInputChange	(value: string) => void	() => undefined as any	Function callback called when user changes the Search Input
onSelect	(event: any, value: React.ReactNode) => void	() => undefined as any	Function callback called when user selects item
onToggle	(event: any, value: boolean) => void	() => undefined as any	Function callback called when user clicks toggle button
ouiaSafe	No type info	true
screenReaderLabel	string	''	Labels the Context Selector for Screen Readers
searchButtonAriaLabel	string	'Search menu items'	Aria-label for the Context Selector Search Button
searchInputPlaceholder	string	'Search'	Search Input placeholder
searchInputValue	string	''	Value in the Search field
toggleText	string	''	Text that appears in the Context Selector Toggle

ContextSelectorItem

*required
Name	Type	Default	Description
children	React.ReactNode	null	Anything which can be rendered as Context Selector item
className	string	''	Classes applied to root element of the Context Selector item
href	string	null	Link href, indicates item should render as anchor tag
isDisabled	boolean	false	Render Context Selector item as disabled
onClick	(event: React.MouseEvent) => void	(): any => undefined	Callback for click event
sendRef	(index: number, current: any) => void	() => {}	Internal callback for ref tracking

ContextSelectorFooter

*required
Name	Type	Default	Description
children	React.ReactNode	null	Content rendered inside the ContextSelectorFooter
className	string	''	Additional classes added to the ContextSelectorFooter

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Copyright © 2021 Red Hat, Inc.

Privacy statement Terms of use All policies and guidelines