Skip to main content
Elastic UI
Elastic UI
Getting startedComponentsPatternsContentData visualization
EUI ChangelogGitHubFigma
  • Overview
  • Layout
  • Containers
  • Navigation
  • Display
  • Forms
    • Form controls
    • Form layouts
    • Form validation
    • Text controls
    • Numeric controls
    • Selection controls
      • Guidelines
      • Checkboxes and radios
      • Basic select
      • Super select
      • Combo box
      • Selectable
    • Search and filter controls
    • Date and time controls
    • Other controls
  • Tabular content
  • Templates
  • Editors and syntax
  • EUI
  • Forms
  • Selection controls
  • Basic select

Basic select

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.

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

Loading...

Props

EuiSelect

Extends SelectHTMLAttributes
𐘂𐘂
✄𐘗✄𐘗
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.
@see aria-labelledby.

Type: 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.
Defaults to fullWidth prop of <EuiForm>.

Type: 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

Type: 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 true creates a shorter height input

Type: boolean
↦
Default value
false
↵
Prop
prepend#
↦
Description and type

Creates an input group with element(s) coming before select.
string | ReactElement or an array of these

Type: PrependAppendType
↦
Default value
↵
Prop
append#
↦
Description and type

Creates an input group with element(s) coming after select.
string | ReactElement or an array of these

Type: PrependAppendType
↦
Default value
↵
𐘂𐘂
Edit this page

Previous
Switches
Next
Super select
  • Props
EUI is dual-licensed under Elastic License 2.0 and Server Side Public License, v 1 | Crafted with ❤ by Elastic