G
Tokens
TypographySpacingColorRadiusShadowMotion

Select

Options


    () => {
      const options = [
        { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' },
        { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' },
        { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' },
      ];
      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)
      return (
        <Select
          label="Film"
          hint="Choose your favorite film"
          options={options}
          value={option.value}
          onChange={(option) => setOption(option)}
        />
      )
    }

Option types


    () => {
      const options = [
        { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' },
        { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' },
        { type: 'divider' },
        { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' },
      ];
      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)
      return (
        <Select
          label="Film"
          hint="Choose your favorite film"
          options={options}
          value={option.value}
          onChange={(option) => setOption(option)}
        />
      )
    }

Trigger variant


    () => {
      const options = Object.values(demoFilmsObject).map((film, index) => {
        return { value: film.name, content: film.name, groupTitle: film.company, }
      })
      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)
      return (
        <Stack gap="s">
          <Select
            triggerVariant="box"
            options={options}
            value={option.value}
            onChange={(option) => setOption(option)}
          />
          <Select
            triggerVariant="text"
            options={options}
            value={option.value}
            onChange={(option) => setOption(option)}
            menuWidth="240px"
          />
        </Stack>
      )
    }

Custom trigger


    () => {
      const options = Object.values(demoFilmsObject).map((film, index) => {
        return { value: film.name, content: film.name, groupTitle: film.company, }
      })
      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)
      return (
        <Stack gap="s">
          <Select
            options={options}
            value={option.value}
            onChange={(option) => setOption(option)}
            trigger={({ props }) => <Select.Trigger variant="text">{props.children}</Select.Trigger>}
          />
          <Select
            options={options}
            value={option.value}
            onChange={(option) => setOption(option)}
            trigger={({ props }) => <Button>{props.children}</Button>}
          />
        </Stack>
      )
    }

Multiple selection


    () => {
      const options = [
        { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' },
        { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' },
        { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' },
      ];
      const defaultOptions = [
        options[0],
        options[1],
      ]
      const [multiSelectedOptions, setMultiSelectedOptions] = React.useState(defaultOptions);
      return (
        <Select
          options={options}
          value={multiSelectedOptions.map(option => option.value)}
          onChange={setMultiSelectedOptions}
          allowMultiple
          trigger={({ props }) => <Select.Trigger>{props.children}</Select.Trigger>}
        />
      )
    }


    () => {
      const options = [
        { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' },
        { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' },
        { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' },
      ];
      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)
      const sharedProps = {        
        options: options,
        value: option.value,
        onChange: (option) => setOption(option),
      }
      return (
        <Arrange gap="s">
          <Select
            menuPlacement="bottomStart"
            menuWidth="fit-content"
            {...sharedProps}
          />
          <Select
            menuPlacement="bottomEnd"
            menuWidth="320px"
            {...sharedProps}
          />
          <Select
            menuPlacement="topStart"
            menuWidth="fit-content"
            {...sharedProps}
          />
          <Select
            menuPlacement="topEnd"
            menuWidth="320px"
            {...sharedProps}
          />
        </Arrange>
      )
    }

Use the menuItemsHaveEllipsis to disable ellipsis on menu items


    () => {
      const options = [
        { value: 'Neopan 100 Acros', content: demoText.l },
        { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' },
        { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' },
      ];
      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)
      return (
        <Select
          label="Film"
          options={options}
          value={option.value}
          onChange={(option) => setOption(option)}
          menuItemsHaveEllipsis={false}
        />
      )
    }

Multiple selection

Use the allowMultiple prop to enable multiple selection


    () => {
      const options = [
        { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' },
        { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' },
        { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' },
      ];
      const defaultOptions = [
        options[0],
        options[1],
      ]
      const [multiSelectedOptions, setMultiSelectedOptions] = React.useState(defaultOptions);
      return (
        <Select
          label="Films"
          options={options}
          value={multiSelectedOptions.map(option => option.value)}
          onChange={setMultiSelectedOptions}
          allowMultiple
        />
      )
    }

Placeholder


    () => {
      const options = [
        { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' },
        { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' },
        { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' },
      ];
      const [option, setOption] = useState();
      return (
        <Select
          label="Film"
          hint="Choose your favorite film"
          options={options}
          value={option && option.value}
          onChange={(option) => setOption(option)}
          placeholder="Choose an option"
        />
      )
    }

Disabled


    () => {
      const options = [{ value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' }];
      const [option, setOption] = useState(options[0])
      return (
        <Select
          label="Film"
          options={options}
          value={option.value}
          onChange={(option) => setOption(option)}
          isDisabled
        />
      )
    }

Background color


    () => {
      const options = [
        { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' },
        { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' },
        { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' },
      ];
      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)
      return (
        <Box padding="l2" backgroundColor="background2" borderSide="all" radius="m">
          <Select
            label="Film"
            hint="Choose your favorite film"
            options={options}
            value={option.value}
            onChange={(option) => setOption(option)}
            backgroundColor="background"
          />
        </Box>
      )
    }

Clearable


    () => {
      const options = [
        { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' },
        { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' },
        { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' },
      ];
      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)
      return (
        <Select
          label="Film"
          options={options}
          value={option.value}
          onChange={(option) => setOption(option)}
          onClear={(option) => setOption({})}
          placeholder="Choose an option"
        />
      )
    }

Props

Name
Type
Default
menuPlacement
oneOf
'top' 'topStart' 'topEnd' 'bottom' 'bottomStart' 'bottomEnd'
'bottomStart'
menuMaxHeight
oneOfType
number
string
'468px'
triggerVariant
oneOf
'box' 'text'
'box'
menuItemsHaveEllipsis
bool
true
hasPortal
bool
true
options
array
value
oneOfType
string
number
array
onChangeREQUIRED
func
menuWidth
oneOfType
number
string
menuZIndex
oneOfType
number
string
trigger
func
label
oneOfType
string
node
hint
oneOfType
string
node
allowMultiple
bool
placeholder
string
isDisabled
bool
backgroundColor
oneOfType
Object.keys(vars.colors)
string
onClear
func