Select

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.

For more information on how to use the features and props for this component, check out the developer documentation.

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. 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.

NameTypeDefaultDescription
children*ReactNodePass Options components as children to render the options of the Select list.
actionsAction[]Pass an array of Action objects to append button(s) inline with the Select.
disabledbooleanDisable the control. The browser defaults to false.
idstringSets 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.
infoReactNodeIt is recommended to pass a simple string to offer guidance. Text will be styled based on status prop.
labelReactNodePass a string or a fragment with an Icon and string.
labelHiddenbooleanVisually hides the label region.
namestringSets html name attribute for the underlying control. Useful for mapping to a data field.
onChangeChangeEventHandler<HTMLSelectElement>Called when an Option is chosen within the list.
readOnlybooleanMakes the input non editable and non clickable. The browser defaults to false.
refRef<HTMLSelectElement>A ref to the select element.
requiredbooleanIndicate if the field is required. The browser defaults to false.
status
'success' |'warning' |'error' 
Set visual state based on a validation state.
valuestringCreates a controlled input and sets the value. Requires an onChange handler to update value. value + onChange is the recommended method per React team.

You can override the styles of the Select component by setting a custom theme on the Configuration component.

{
      •       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
      •     }
    •   }
}