Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

MultiSelect

MultiSelect is a component used for allowing users to select multiple values from a list of options.

Source@yamada-ui/select

Import

import { MultiSelect, OptionGroup, Option } from "@yamada-ui/react"
Copied!

Usage

Editable example

<MultiSelect placeholder="キャラクターを選択">
  <Option value="孫悟空">孫悟空</Option>
  <Option value="ベジータ">ベジータ</Option>
  <Option value="フリーザ">フリーザ</Option>
</MultiSelect>
Copied!

Alternatively, you can omit Option by setting items.

Editable example

const items: SelectItem[] = [
  { label: "孫悟空", value: "孫悟空" },
  { label: "ベジータ", value: "ベジータ" },
  { label: "フリーザ", value: "フリーザ" },
]

return <MultiSelect placeholder="キャラクターを選択" items={items} />
Copied!

Change Variant

Editable example

<VStack>
  <MultiSelect variant="outline" placeholder="outline" />
  <MultiSelect variant="filled" placeholder="filled" />
  <MultiSelect variant="flushed" placeholder="flushed" />
  <MultiSelect variant="unstyled" placeholder="unstyled" />
</VStack>
Copied!

Change Size

Editable example

<VStack>
  <MultiSelect placeholder="extra small size" size="xs" />
  <MultiSelect placeholder="small size" size="sm" />
  <MultiSelect placeholder="medium size" size="md" />
  <MultiSelect placeholder="large size" size="lg" />
</VStack>
Copied!

Set Default Values

To set default values, set a string to defaultValue.

Editable example

<MultiSelect placeholder="キャラクターを選択" defaultValue={["ベジータ"]}>
  <Option value="孫悟空">孫悟空</Option>
  <Option value="ベジータ">ベジータ</Option>
  <Option value="フリーザ">フリーザ</Option>
</MultiSelect>
Copied!

Add header to a dropdown

Editable example

<MultiSelect
  placeholder="キャラクターを選択"
  header={
    <Center pt="2" px="3">
      Header added here
    </Center>
  }
>
  <Option value="孫悟空">孫悟空</Option>
  <Option value="ベジータ">ベジータ</Option>
  <Option value="フリーザ">フリーザ</Option>
</MultiSelect>
Copied!

Add footer to a dropdown

Editable example

<MultiSelect
  placeholder="キャラクターを選択"
  footer={
    <Center pb="2" px="3">
      Footer added here
    </Center>
  }
>
  <Option value="孫悟空">孫悟空</Option>
  <Option value="ベジータ">ベジータ</Option>
  <Option value="フリーザ">フリーザ</Option>
</MultiSelect>
Copied!

Grouping

To group options, use OptionGroup.

Editable example

<MultiSelect placeholder="キャラクターを選択">
  <OptionGroup label="地球人">
    <Option value="孫悟空">孫悟空</Option>
    <Option value="孫悟飯">孫悟飯</Option>
    <Option value="クリリン">クリリン</Option>
  </OptionGroup>

  <OptionGroup label="フリーザ軍">
    <Option value="フリーザ">フリーザ</Option>
    <Option value="ギニュー">ギニュー</Option>
    <Option value="リクーム">リクーム</Option>
    <Option value="バータ">バータ</Option>
    <Option value="ジース">ジース</Option>
    <Option value="グルド">グルド</Option>
  </OptionGroup>
</MultiSelect>
Copied!

For items, set it like this.

Editable example

const items: SelectItem[] = [
  { label: "ベジータ", value: "ベジータ" },
  {
    label: "地球人",
    items: [
      { label: "孫悟空", value: "孫悟空" },
      { label: "孫悟飯", value: "孫悟飯" },
      { label: "クリリン", value: "クリリン" },
    ],
  },
  {
    label: "フリーザ軍",
    items: [
      { label: "フリーザ", value: "フリーザ" },
      { label: "ギニュー", value: "ギニュー" },
      { label: "リクーム", value: "リクーム" },
      { label: "バータ", value: "バータ" },
      { label: "ジース", value: "ジース" },
      { label: "グルド", value: "グルド" },
    ],
  },
]

return <MultiSelect placeholder="キャラクターを選択" items={items} />
Copied!

Change Border Color

To change the border color, set a color to focusBorderColor or errorBorderColor.

Editable example

<VStack>
  <MultiSelect focusBorderColor="green.500" placeholder="custom border color" />
  <MultiSelect
    isInvalid
    errorBorderColor="orange.500"
    placeholder="custom border color"
  />
</VStack>
Copied!

Customize Separator

To customize the separator, set a string to separator.

Editable example

<MultiSelect placeholder="キャラクターを選択" separator=";">
  <Option value="孫悟空">孫悟空</Option>
  <Option value="ベジータ">ベジータ</Option>
  <Option value="フリーザ">フリーザ</Option>
</MultiSelect>
Copied!

Use Custom Component

To use a custom component, set a ReactElement to component. component provides value, label, index, onRemove.

Editable example

<VStack>
  <MultiSelect
    placeholder="キャラクターを選択"
    component={({ label }) => <Tag>{label}</Tag>}
  >
    <Option value="孫悟空">孫悟空</Option>
    <Option value="ベジータ">ベジータ</Option>
    <Option value="フリーザ">フリーザ</Option>
  </MultiSelect>

  <MultiSelect
    placeholder="キャラクターを選択"
    component={({ label, onRemove }) => <Tag onClose={onRemove}>{label}</Tag>}
  >
    <Option value="孫悟空">孫悟空</Option>
    <Option value="ベジータ">ベジータ</Option>
    <Option value="フリーザ">フリーザ</Option>
  </MultiSelect>
</VStack>
Copied!

Exclude Selected Values from List

To exclude selected values from the list, set omitSelectedValues to true.

Editable example

<MultiSelect placeholder="キャラクターを選択" omitSelectedValues={true}>
  <OptionGroup label="地球人">
    <Option value="孫悟空">孫悟空</Option>
    <Option value="孫悟飯">孫悟飯</Option>
    <Option value="クリリン">クリリン</Option>
  </OptionGroup>

  <OptionGroup label="フリーザ軍">
    <Option value="フリーザ">フリーザ</Option>
    <Option value="ギニュー">ギニュー</Option>
    <Option value="リクーム">リクーム</Option>
    <Option value="バータ">バータ</Option>
    <Option value="ジース">ジース</Option>
    <Option value="グルド">グルド</Option>
  </OptionGroup>
</MultiSelect>
Copied!

Set Maximum Number of Selectable Values

To set the maximum number of selectable values, set maxSelectValues to a number.

Editable example

<MultiSelect placeholder="キャラクターを選択" maxSelectValues={3}>
  <OptionGroup label="地球人">
    <Option value="孫悟空">孫悟空</Option>
    <Option value="孫悟飯">孫悟飯</Option>
    <Option value="クリリン">クリリン</Option>
  </OptionGroup>

  <OptionGroup label="フリーザ軍">
    <Option value="フリーザ">フリーザ</Option>
    <Option value="ギニュー">ギニュー</Option>
    <Option value="リクーム">リクーム</Option>
    <Option value="バータ">バータ</Option>
    <Option value="ジース">ジース</Option>
    <Option value="グルド">グルド</Option>
  </OptionGroup>
</MultiSelect>
Copied!

Close Dropdown List on Selection

To close the dropdown list on selection, set closeOnSelect to true.

Editable example

<MultiSelect placeholder="キャラクターを選択" closeOnSelect={true}>
  <Option value="孫悟空">孫悟空</Option>
  <Option value="ベジータ">ベジータ</Option>
  <Option value="フリーザ">フリーザ</Option>
</MultiSelect>
Copied!

Disable Clearing

To disable clearing, set isClearable to false.

Editable example

<MultiSelect placeholder="キャラクターを選択" isClearable={false}>
  <Option value="孫悟空">孫悟空</Option>
  <Option value="ベジータ">ベジータ</Option>
  <Option value="フリーザ">フリーザ</Option>
</MultiSelect>
Copied!

Change Display Position

To change the display position, set placement to top, left-start, etc. By default, bottom is set.

Editable example

<MultiSelect placeholder="キャラクターを選択" placement="right-start" maxW="xs">
  <Option value="孫悟空">孫悟空</Option>
  <Option value="ベジータ">ベジータ</Option>
  <Option value="フリーザ">フリーザ</Option>
</MultiSelect>
Copied!

Change Duration

To change the duration, set a number (seconds) to duration.

Editable example

<MultiSelect placeholder="キャラクターを選択" duration={0.4}>
  <Option value="孫悟空">孫悟空</Option>
  <Option value="ベジータ">ベジータ</Option>
  <Option value="フリーザ">フリーザ</Option>
</MultiSelect>
Copied!

Change Offset

Depending on the size of the element or the situation, you may want to adjust the position of the tooltip. In that case, adjust the position with gutter or offset.

gutter allows you to set the difference with simple elements, and offset allows you to set [horizontal, vertical].

Editable example

<VStack>
  <MultiSelect placeholder="キャラクターを選択" gutter={32}>
    <Option value="孫悟空">孫悟空</Option>
    <Option value="ベジータ">ベジータ</Option>
    <Option value="フリーザ">フリーザ</Option>
  </MultiSelect>

  <MultiSelect
    placeholder="キャラクターを選択"
    offset={[16, 16]}
    listProps={{ maxW: "xs" }}
  >
    <Option value="孫悟空">孫悟空</Option>
    <Option value="ベジータ">ベジータ</Option>
    <Option value="フリーザ">フリーザ</Option>
  </MultiSelect>
</VStack>
Copied!

Disable

To disable, set isDisabled to true.

Editable example

<VStack>
  <MultiSelect isDisabled variant="outline" placeholder="outline" />
  <MultiSelect isDisabled variant="filled" placeholder="filled" />
  <MultiSelect isDisabled variant="flushed" placeholder="flushed" />
  <MultiSelect isDisabled variant="unstyled" placeholder="unstyled" />

  <FormControl
    isDisabled
    label="Which notifications would you like to receive?"
  >
    <MultiSelect placeholder="Select notifications" />
  </FormControl>
</VStack>
Copied!

To disable an option, set isDisabled to true on Option.

Editable example

<MultiSelect placeholder="キャラクターを選択">
  <Option value="孫悟空">孫悟空</Option>
  <Option value="ベジータ" isDisabled>
    ベジータ
  </Option>
  <Option value="フリーザ">フリーザ</Option>
</MultiSelect>
Copied!

Make Read-Only

To make read-only, set isReadOnly to true.

Editable example

<VStack>
  <MultiSelect isReadOnly variant="outline" placeholder="outline" />
  <MultiSelect isReadOnly variant="filled" placeholder="filled" />
  <MultiSelect isReadOnly variant="flushed" placeholder="flushed" />
  <MultiSelect isReadOnly variant="unstyled" placeholder="unstyled" />

  <FormControl
    isReadOnly
    label="Which notifications would you like to receive?"
  >
    <MultiSelect placeholder="Select notifications" />
  </FormControl>
</VStack>
Copied!

Make Input Invalid

To make the input invalid, set isInvalid to true.

Editable example

<VStack>
  <MultiSelect isInvalid variant="outline" placeholder="outline" />
  <MultiSelect isInvalid variant="filled" placeholder="filled" />
  <MultiSelect isInvalid variant="flushed" placeholder="flushed" />
  <MultiSelect isInvalid variant="unstyled" placeholder="unstyled" />

  <FormControl
    isInvalid
    label="Which notifications would you like to receive?"
    errorMessage="This is required."
  >
    <MultiSelect placeholder="Select notifications" />
  </FormControl>
</VStack>
Copied!

Customize Icons

To customize icons, set props to iconProps or clearIconProps.

Editable example

<VStack>
  <MultiSelect
    placeholder="キャラクターを選択"
    iconProps={{ color: "primary" }}
  >
    <Option value="孫悟空">孫悟空</Option>
    <Option value="ベジータ">ベジータ</Option>
    <Option value="フリーザ">フリーザ</Option>
  </MultiSelect>

  <MultiSelect
    placeholder="キャラクターを選択"
    iconProps={{ children: <ChevronsDownIcon /> }}
  >
    <Option value="孫悟空">孫悟空</Option>
    <Option value="ベジータ">ベジータ</Option>
    <Option value="フリーザ">フリーザ</Option>
  </MultiSelect>

  <MultiSelect
    placeholder="キャラクターを選択"
    clearIconProps={{ children: <TrashIcon w="0.5em" /> }}
  >
    <Option value="孫悟空">孫悟空</Option>
    <Option value="ベジータ">ベジータ</Option>
    <Option value="フリーザ">フリーザ</Option>
  </MultiSelect>
</VStack>
Copied!

Customize Options

To customize options, set props to optionProps.

Editable example

<VStack>
  <MultiSelect
    placeholder="キャラクターを選択"
    optionProps={{ color: "primary" }}
  >
    <Option value="孫悟空">孫悟空</Option>
    <Option value="ベジータ">ベジータ</Option>
    <Option value="フリーザ">フリーザ</Option>
  </MultiSelect>

  <MultiSelect
    placeholder="キャラクターを選択"
    optionProps={{ icon: <CheckIcon color="green.500" /> }}
  >
    <Option value="孫悟空">孫悟空</Option>
    <Option value="ベジータ">ベジータ</Option>
    <Option value="フリーザ">フリーザ</Option>
  </MultiSelect>
</VStack>
Copied!

Control

Editable example

const [value, onChange] = useState<string[]>(["孫悟空"])

return (
  <MultiSelect
    placeholder="キャラクターを選択"
    value={value}
    onChange={onChange}
  >
    <Option value="孫悟空">孫悟空</Option>
    <Option value="ベジータ">ベジータ</Option>
    <Option value="フリーザ">フリーザ</Option>
  </MultiSelect>
)
Copied!

Use React Hook Form

Editable example

type Data = { select: string[] }

const items: SelectItem[] = [
  { label: "ベジータ", value: "ベジータ" },
  {
    label: "地球人",
    items: [
      { label: "孫悟空", value: "孫悟空" },
      { label: "孫悟飯", value: "孫悟飯" },
      { label: "クリリン", value: "クリリン" },
    ],
  },
  {
    label: "フリーザ軍",
    items: [
      { label: "フリーザ", value: "フリーザ" },
      { label: "ギニュー", value: "ギニュー" },
      { label: "リクーム", value: "リクーム" },
      { label: "バータ", value: "バータ" },
      { label: "ジース", value: "ジース" },
      { label: "グルド", value: "グルド" },
    ],
  },
]

const {
  control,
  handleSubmit,
  watch,
  formState: { errors },
} = useForm<Data>()

const onSubmit: SubmitHandler<Data> = (data) => console.log("submit:", data)

console.log("watch:", watch())

return (
  <VStack as="form" onSubmit={handleSubmit(onSubmit)}>
    <FormControl
      isInvalid={!!errors.select}
      label="Who is your favorite character?"
      errorMessage={errors.select ? errors.select.message : undefined}
    >
      <Controller
        name="select"
        control={control}
        rules={{ required: { value: true, message: "This is required." } }}
        render={({ field }) => (
          <MultiSelect
            placeholder="キャラクターを選択"
            {...field}
            items={items}
          />
        )}
      />
    </FormControl>

    <Button type="submit" alignSelf="flex-end">
      Submit
    </Button>
  </VStack>
)
Copied!

Edit this page on GitHub

PreviousSelectNextNativeSelect