PatternFly

Select

A select list enables users to select one or more items from a list. Use a select list when options are dynamic or variable.

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

Checkbox

Typeahead

Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user enters characters into the text input, the menu options will be filtered to match.

Selection can be given by either the selected property or by setting isSelected on the option that is currently selected.

Multi-Typeahead

  • Massachusetts

Props

SimpleSelect

*required
NameTypeDefaultDescription
initialOptionsSimpleSelectOption[]Initial options of the select.
isDisabledbooleanFlag indicating the select should be disabled.
onSelect(_event: React.MouseEvent<Element, MouseEvent>, selection: string | number) => voidCallback triggered on selection.
onToggle(nextIsOpen: boolean) => voidCallback triggered when the select opens or closes.
placeholderstringPlaceholder text for the select input.
toggleContentReact.ReactNodeContent of the toggle. Defaults to the selected option.
togglePropsMenuTogglePropsAdditional props passed to the toggle.
toggleWidthstringWidth of the toggle.

CheckboxSelect

*required
NameTypeDefaultDescription
initialOptionsCheckboxSelectOption[]Initial options of the select.
isDisabledbooleanFlag indicating the select should be disabled.
onSelect(_event: React.MouseEvent<Element, MouseEvent>, value?: string | number) => voidCallback triggered on selection.
onToggle(nextIsOpen: boolean) => voidCallback triggered when the select opens or closes.
toggleContentReact.ReactNodeContent of the toggle. Defaults to a string with badge count of selected options.
togglePropsMenuTogglePropsAdditional props passed to the toggle.
toggleWidthstringWidth of the toggle.

TypeaheadSelect

*required
NameTypeDefaultDescription
selectOptionsrequiredTypeaheadSelectOption[]Options of the select
createOptionMessagestring | ((newValue: string) => string)Message to display to create a new option
filterFunction(filterValue: string, options: TypeaheadSelectOption[]) => TypeaheadSelectOption[]Function to return items matching the current filter value
isCreatablebooleanFlag to indicate if the typeahead select allows new items
isCreateOptionOnTopbooleanFlag to indicate if create option should be at top of typeahead
isDisabledbooleanFlag indicating the select should be disabled.
noOptionsAvailableMessagestringMessage to display when no options are available.
noOptionsFoundMessagestring | ((filter: string) => string)Message to display when no options match the filter.
onClearSelection() => voidCallback triggered when the clear button is selected
onInputChange(newValue: string) => voidCallback triggered when the text in the input field changes.
onSelect( _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<HTMLInputElement> | undefined, selection: string | number ) => voidCallback triggered on selection.
onToggle(nextIsOpen: boolean) => voidCallback triggered when the select opens or closes.
placeholderstringPlaceholder text for the select input.
togglePropsMenuTogglePropsAdditional props passed to the toggle.
toggleWidthstringWidth of the toggle.

View source on GitHub