Form select

A form select embeds browser native select lists into a form.

Examples

Basic

Validated

  

Disabled

Grouped

Props

FormSelect

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodecontent rendered inside the FormSelect
aria-labelstringCustom flag to show that the FormSelect requires an associated id or aria-label.
classNamestring''additional classes added to the FormSelect control
isDisabledbooleanfalseFlag indicating the FormSelect is disabled
isRequiredbooleanfalseSets the FormSelect required.
onBlur(event: React.FormEvent<HTMLSelectElement>) => void(): any => undefinedOptional callback for updating when selection loses focus
onChange(event: React.FormEvent<HTMLSelectElement>, value: string) => void(): any => undefinedOptional callback for updating when selection changes
onFocus(event: React.FormEvent<HTMLSelectElement>) => void(): any => undefinedOptional callback for updating when selection gets focus
ouiaIdnumber | stringValue to overwrite the randomly generated data-ouia-component-id.
ouiaSafebooleantrueSet the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.
validated'success' | 'warning' | 'error' | 'default''default'Value to indicate if the select is modified to show that validation state. If set to success, select will be modified to indicate valid state. If set to error, select will be modified to indicate error state.
valueany''value of selected option

FormSelectOption

*required
NameTypeDefaultDescription
labelrequiredstringthe label for the option
classNamestring''additional classes added to the Select Option
isDisabledbooleanfalseflag indicating if the option is disabled
isPlaceholderbooleanfalseflag indicating if option will have placeholder styling applied when selected *
valueany''the value for the option

FormSelectOptionGroup

*required
NameTypeDefaultDescription
labelrequiredstringthe label for the option
childrenReact.ReactNodenullcontent rendered inside the Select Option Group
classNamestring''additional classes added to the Select Option
isDisabledbooleanfalseflag indicating if the Option Group is disabled

CSS variables

Expand or collapse columnSelectorVariableValue

View source on GitHub