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
Props
SimpleSelect
| Name | Type | Default | 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. | |
| 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
| Name | Type | Default | 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
| Name | Type | Default | Description |
|---|---|---|---|
| initialOptionsrequired | TypeaheadSelectOption[] | Initial options of the select. | |
| isDisabled | boolean | Flag indicating the select should be disabled. | |
| noOptionsFoundMessage | string | ((filter: string) => string) | Message to display when no options match the filter. | |
| onInputChange | (newValue: string) => void | Callback triggered when the text in the input field changes. | |
| onSelect | ( _event: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<HTMLInputElement>, 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
