Select

A select component is a menu that enables users to select 1 or more items from a list.

Info alert:Beta feature

This beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more about the process, visit our about page or our Beta components page on GitHub.

Info alert:Templates

This page showcases templates for the select component. A template combines a component with logic that supports a specific use case, with a streamlined API that offers additional, limited customization.

Note: Templates live in their own package at @patternfly/react-templates!

For custom use cases, please see the select component suite from @patternfly/react-core.

Select template examples

Simple

isDisabled

Checkbox

Typeahead

isCreatable

isCreateOptionOnTop

Multi-Typeahead

Props

SimpleSelect

*required
Name	Type	Description
initialOptions	SimpleSelectOption[]	Initial options of the select.
isDisabled	boolean	Flag indicating the select should be disabled.
onSelect	(_event: React.MouseEvent<Element, MouseEvent>, selection: string \| number) => void	Callback triggered on selection.
onToggle	(nextIsOpen: boolean) => void	Callback triggered when the select opens or closes.
placeholder	string	Placeholder text for the select input.
toggleContent	React.ReactNode	Content of the toggle. Defaults to the selected option.
toggleProps	MenuToggleProps	Additional props passed to the toggle.
toggleWidth	string	Width of the toggle.

CheckboxSelect

*required
Name	Type	Description
initialOptions	CheckboxSelectOption[]	Initial options of the select.
isDisabled	boolean	Flag indicating the select should be disabled.
onSelect	(_event: React.MouseEvent<Element, MouseEvent>, value?: string \| number) => void	Callback triggered on selection.
onToggle	(nextIsOpen: boolean) => void	Callback triggered when the select opens or closes.
toggleContent	React.ReactNode	Content of the toggle. Defaults to a string with badge count of selected options.
toggleProps	MenuToggleProps	Additional props passed to the toggle.
toggleWidth	string	Width of the toggle.

TypeaheadSelect

*required
Name	Type	Description
initialOptionsrequired	TypeaheadSelectOption[]	Initial options of the select.
createOptionMessage	string \| ((newValue: string) => string)	Message to display to create a new option
isCreatable	boolean	Flag to indicate if the typeahead select allows new items
isCreateOptionOnTop	boolean	Flag to indicate if create option should be at top of typeahead
isDisabled	boolean	Flag indicating the select should be disabled.
noOptionsAvailableMessage	string	Message to display when no options are available.
noOptionsFoundMessage	string \| ((filter: string) => string)	Message to display when no options match the filter.
onClearSelection	() => void	Callback triggered when the clear button is selected
onInputChange	(newValue: string) => void	Callback triggered when the text in the input field changes.
onSelect	( _event: React.MouseEvent<Element, MouseEvent> \| React.KeyboardEvent<HTMLInputElement> \| undefined, selection: string \| number ) => void	Callback triggered on selection.
onToggle	(nextIsOpen: boolean) => void	Callback triggered when the select opens or closes.
placeholder	string	Placeholder text for the select input.
toggleProps	MenuToggleProps	Additional props passed to the toggle.
toggleWidth	string	Width of the toggle.

View source on GitHub