Last modified: 4/Oct/2024

Select

The Select component can be used when you want to offer a handful of options to the user to choose from (usually more than what would be ideal for a RadioButton), and the user can only choose one option.

#Usage

So you can use the Select component this easy:

<Select options={['item-1', 'item-2']} onChange={handleOnChange} />

Of course, you can use labels, if you need to:

<Select
  options={[
    { label: 'Item 1', value: 'item-1' },
    { label: 'Item 2', value: 'item-2' },
  ]}
/>

Also, you can use React children as well! The following snippets result is same as the above:

<Select onChange={handleOnChange}>
  <Select.Option value="item-1">Item 1</Select.Option>
  <Select.Option value="item-2">Item 2</Select.Option>
</Select>

In addition, we introduced a new feature: groups, like the HTML element. Consider this array:

const groups = [
  {
    label: 'Series',
    options: [
      {
        label: 'Stranger Things',
        value: 'stranger-things',
      },
      {
        label: 'Squid Game',
        value: 'squid-game',
      },
    ],
  },
  {
    label: 'Movies',
    options: [
      {
        label: 'Top Gun Maverick',
        value: 'new-top-gun',
      },
    ],
  },
]

<Select options={groups} onChange={handleOnChange} />

Of course, you can use JSX here as well:

<Select onChange={handleOnChange}>
  <Select.OptionGroup label="Series">
    <Select.Option value="stranger-things">Stranger Things</Select.Option>
    <Select.Option value="squid-game">Squid Game</Select.Option>
  </Select.OptionGroup>
  <Select.OptionGroup label="Movies">
    <Select.Option value="new-top-gun">Top Gun Maverick</Select.Option>
  </Select.OptionGroup>
</Select>

#Props

The Select components interface extends the HTMLSelectElement interface. So you can use any props which documented there. Also, you can utilize all the React Synthetic events (on*), and props related to styling (className, style). These props will be applied to the Select's reference button.

import { ReactElement } from 'react'

type SelectOption = string | { label: ReactElement | string; value: string }
type SelectOptionGroup = { label: string; options: SelectItem[] }

#isDense

boolean

Changes the layout and the look of the Select

#value

string

A string represents the value selected outside the component

#label

string | (ReactElement<any, string | JSXElementConstructor<any>> & string)

#isDisabled

boolean

Sets the disabled state of the select input and prevents opening it

#errorMessage

string | ReactElement<any, string | JSXElementConstructor<any>>

It displays the given string as the content of the error message.

#hasError

boolean

Set the error state of the select

#description

string | ReactElement<any, string | JSXElementConstructor<any>>

Content of the description

#placeholder

string

Content for placeholder

#onChange

(value: string) => void

Handler that called when the selection changes

#optionsMaxHeight

number

The floating element will have a maxHeight property with the given number in px. If left empty, it will fill the available height.

#isWidthAdjusted

boolean

Adjust the width of the items to the parent width

#placement

Placement

Decides the placement of the dropdown

#isPortalDisabled

boolean

By default the floating element is rendered into a React portal to avoid stacking context issues. You can disable this behaviour and render the element next to the reference

#options

Required

Option[] | Group[]

The options of the Select. Alternatively you can use the children prop to provide the options.

#Types

SelectProps: props of the Select component processed by stratus
SelectInterface: SelectProps extended by Omit<HTMLProps<HTMLSelectElement>, 'value' | 'onChange' | 'placeholder' | 'label'>
SelectOptionProps: props of the Select.Option component processed by stratus
OptionGroupProps: props of the Select.OptionGroup component processed by stratus
SelectOptionOrGroupElements: the type that includes the Select.Option, Select.OptionGroup and arrays of them.

#See also

Dropdowns