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
footerReact.ReactNodenullFooter of the context selector
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
menuAppendToNo type info'inline'
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
toggleTextstring''Text that appears in the Context Selector Toggle

ContextSelectorItem

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullAnything which can be rendered as Context Selector item
classNamestring''Classes applied to root element of the Context Selector item
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

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2021 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines