Basic select
EuiSelect is a simple dropdown component that allows users to select a single option from a list. It renders a native HTML <select> element.
Use EuiSelect to allow users to choose from a list of 7 to 12 options. When there are less than 7 options consider using a EuiRadioGroup. For more details on which selection component to use, see the Component comparison.
Wrap your form controls in a form row
Use the EuiFormRow component to easily and accessibly associate form components with labels, help text, and error text.
Props
EuiSelect
Prop | Description and type | Default value |
|---|---|---|
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Defines a string value that labels the current element. string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |
Prop options# | Description and type Type: EuiSelectOption[] | Default value [] |
Prop isInvalid# | Description and type Type: boolean | Default value |
Prop fullWidth# | Description and type Expand to fill 100% of the parent. boolean | Default value false |
Prop isLoading# | Description and type Type: boolean | Default value |
Prop hasNoInitialSelection# | Description and type Simulates no selection by creating an empty, selected, hidden first option boolean | Default value false |
Prop inputRef# | Description and type Type: Ref<HTMLSelectElement> | Default value |
Prop value# | Description and type Type: string | number | Default value |
Prop compressed# | Description and type when boolean | Default value false |
Prop prepend# | Description and type Creates an input group with element(s) coming before select. PrependAppendType | Default value |
Prop append# | Description and type Creates an input group with element(s) coming after select. PrependAppendType | Default value |