Select

{({ isOpen }) => (
  <Button endEnhancer={<ChevronDown size={10} $isOpen={isOpen} style={chevronStyles} />} variant="secondary">
    {value[0]?.id || 'Select Color'}
  </Button>
)}

[
  {label: 'AliceBlue', id: '#F0F8FF'},
  {label: 'AntiqueWhite', id: '#FAEBD7'},
  {label: 'Aqua', id: '#00FFFF'},
  {label: 'Aquamarine', id: '#7FFFD4'},
  {label: 'Beige', id: '#F5F5DC'},
]

[]

(params) => setValue(params.value)

import * as React from "react";
import { Select } from "spaceweb/select";
import { Button } from "spaceweb/button";
import ChevronDown from "spaceweb-icons/line/ChevronDown";

export default () => {
  const [value, setValue] = React.useState([]);
  return (
    <Select
      intent="default"
      options={[
        { label: "AliceBlue", id: "#F0F8FF" },
        { label: "AntiqueWhite", id: "#FAEBD7" },
        { label: "Aqua", id: "#00FFFF" },
        { label: "Aquamarine", id: "#7FFFD4" },
        { label: "Beige", id: "#F5F5DC" }
      ]}
      value={value}
      type="select"
      placeholder="Select color"
      onChange={params => setValue(params.value)}
    >
      {({ isOpen }) => (
        <Button
          endEnhancer={
            <ChevronDown
              size={10}
              $isOpen={isOpen}
              style={chevronStyles}
            />
          }
          variant="secondary"
        >
          {value[0]?.id || "Select Color"}
        </Button>
      )}
    </Select>
  );
}

The select and search controls allow the user to select an option or options.

Select menus in Base hover atop of a selection menu while providing a simple list of options. Proper spacing, color, and a check-mark are clear indicators of a selection. Each menu is scrollable, if applicable.

Note: by default, id and label are default properties that Select components look for in options array objects. To adapt to custom properties, use the labelKey and valueKey to override the defaults.

Examples

Things to note in the example source code:

• the value is always an Array to provide a consistent interface - no matter if you use multi or single selects,
• you have to call setState with the entire object, not just the id value.

Things to note:

• keys should be unique b/w group options

When type is 'search' a magnifying glass icon will be rendered to the input's left and a dropdown arrow will not be rendered to the right.

The creatable select enables users to create new options along with choosing existing options.

When type is 'overlay', select renders in overlay. Child element works as target element for overlay select.

Virtualization is enabled in Select by default. Select uses react-virtual.

To override the Popover that's being used by the Dropdown subcomponent, you have to use a nested override.

Setting clearAsOption will render an additional option in the popover whenever a value is selected. This additional option can be used to clear the selected value. Whenever clearAsOption is set, ClearIcon will not be rendered irrespective of the value of clearable prop. By default the label for this clear option will be Unassign, a custom label can be set using clearAsOptionLabel prop.

API

Select props

You can check the implementation of the component for more details.

Select exports

You can import this module like so:

import {CLEARABLE_KEY} from 'spaceweb/select'

It exports the following components or utility functions:

• CLEARABLE_KEY
• CLEAR_OPTION_ID
• CollapsibleSelectMenu
• GroupedSelect
• LOADING_KEY
• MobileSheet
• MultiSelect
• MultiValue
• NoResults
• SELECT_ALL_ID
• STATE_CHANGE_TYPE
• Select
• SelectMenuAdapter
• SingleSelect
• SingleValue
• StatefulSelect
• StyledClearIcon
• StyledControlContainer
• StyledDropdownContainer
• StyledIconsContainer
• StyledInput
• StyledInputContainer
• StyledInputSizer
• StyledOverlayContentContainer
• StyledPlaceholder
• StyledRoot
• StyledSearchIconContainer
• StyledSelectArrow
• StyledSingleValue
• StyledValueContainer
• defaultFilterOptions