| Name | Description | Default | Type |
|---|---|---|---|
children* | Pass Options components as children to render the options of the Select list. | | ReactNode |
actions | Pass an array of Action objects to append button(s) inline with the Select. | | Action[] |
additionalInfo | Pass a heading and content to show additional information on the field. | | { content: string | Element; heading: string;} |
disabled | Disable the control. The browser defaults to false. | | boolean |
id | Sets DOM id for the control and associates label element via 'for' attribute. If an id is not pass, a random id will be generated for any render. | | string |
info | It is recommended to pass a simple string to offer guidance. Text will be styled based on status prop. | | ReactNode |
label | Pass a string or a fragment with an Icon and string. | | ReactNode |
labelHidden | Visually hides the label region. | | boolean |
name | Sets html name attribute for the underlying control. Useful for mapping to a data field. | | string |
onChange | Called when an Option is chosen within the list. | | ChangeEventHandler<HTMLSelectElement> |
onResolveSuggestion | | (accepted: boolean) => void | |
readOnly | Makes the input non editable and non clickable. The browser defaults to false. | | boolean |
ref | A ref to the select element. | | Ref<HTMLSelectElement> |
required | Indicate if the field is required. The browser defaults to false. | | boolean |
status | Set visual state based on a validation state. | | 'error' |'pending' |'success' |'warning' |
value | Creates a controlled input and sets the value. Requires an onChange handler to update value. value + onChange is the recommended method per React team. | | string |
Select
core package3.2.2
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
Select components provide a set of options for the user to select. Use a Select Field in a Form if you have 7 or more options to display, or if the options are dynamic. If there are fewer than 7 options, a RadioButtonGroup or CheckboxGroup is more appropriate. If you require more details associated with each of your options, or require the ability to select multiple items, we suggest using the ComboBox component instead.
Usage
The Select component accepts options as children, and the user may select only one at a time. The Select component allows for standard Form Field structures such as being set required, disabled, or readOnly, as well as including a label, status, or info. If an onResolveSuggestion callback function is provided, and the status is set to pending, the user will be prompted to accept or deny whatever suggested value populates the Select component. They also support the use of actions which, if provided, will render an inline MenuButton containing the set of specified actions to configure the input.
If there is a label and the Field is not disabled, passing an object to the additionalInfo prop that includes a heading and content will provide the user with more useful information on the Field when they click on the associated information Icon.
Example
Choose a value
Related components
Properties
Custom theming
You can override the styles of the Select component by setting a custom theme on the Configuration component.
Example
Choose a value
Theme properties
{
height:'2rem',padding:'components.form-control.padding',// → components.form-control.padding'border-color':'components.form-control.border-color',// → components.form-control.border-color'border-width':'components.form-control.border-width',// → components.form-control.border-width'border-radius':'components.form-control.border-radius'// → components.form-control.border-radius}}}