Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.7.2

MultiAutocomplete

MultiAutocompleteは、ユーザーのテキスト入力に応じて候補を表示し、複数の値を取得するために使用されるコンポーネントです。

ソース@yamada-ui/autocomplete

インポート

import {
  MultiAutocomplete,
  AutocompleteOptionGroup,
  AutocompleteOption,
} from "@yamada-ui/react"
Copied!

使い方

編集可能な例

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

または、itemsを設定することでAutocompleteOptionを省略することができます。

編集可能な例

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

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

バリアントを変更する

編集可能な例

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

サイズを変更する

編集可能な例

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

デフォルトの値を設定する

デフォルトの値を設定する場合は、defaultValueに文字列の配列を設定します。

編集可能な例

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

ドロップダウンにヘッダーを追加する

編集可能な例

<MultiAutocomplete
  placeholder="キャラクターを選択"
  header={
    <Center pt="2" px="3">
      ここにヘッダーが追加されます
    </Center>
  }
>
  <AutocompleteOption value="孫悟空">孫悟空</AutocompleteOption>
  <AutocompleteOption value="ベジータ">ベジータ</AutocompleteOption>
  <AutocompleteOption value="フリーザ">フリーザ</AutocompleteOption>
</MultiAutocomplete>
Copied!

ドロップダウンにフッターを追加する

編集可能な例

<MultiAutocomplete
  placeholder="キャラクターを選択"
  footer={
    <Center pb="2" px="3">
      ここにフッターが追加されます
    </Center>
  }
>
  <AutocompleteOption value="孫悟空">孫悟空</AutocompleteOption>
  <AutocompleteOption value="ベジータ">ベジータ</AutocompleteOption>
  <AutocompleteOption value="フリーザ">フリーザ</AutocompleteOption>
</MultiAutocomplete>
Copied!

空のメッセージを設定する

項目がない場合に表示するメッセージを設定するには、emptyMessageプロパティを使用します。

編集可能な例

<MultiAutocomplete
  placeholder="キャラクターを選択"
  emptyMessage="キャラクターが存在しません"
>
  <AutocompleteOption value="孫悟空">孫悟空</AutocompleteOption>
  <AutocompleteOption value="ベジータ">ベジータ</AutocompleteOption>
  <AutocompleteOption value="フリーザ">フリーザ</AutocompleteOption>
</MultiAutocomplete>
Copied!

新しい項目の作成を許可する

新しい項目の作成を許可する場合は、allowCreateをtrueに設定します。

編集可能な例

const items: AutocompleteItem[] = [
  { 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 (
  <MultiAutocomplete
    placeholder="キャラクターを選択"
    items={items}
    allowCreate
  />
)
Copied!

作成された項目の挿入位置を変更する

作成された項目の挿入位置を変更する場合は、insertPositionItemにfirstやlastなどを設定します。デフォルトでは、firstが設定されています。

  • first: リストの先頭に挿入されます。
  • last: リストの最後尾に挿入されます。
  • [グループ名, first | last]: 特定のグループの先頭または最後尾に挿入したい場合は、グループ名とfirstまたはlastを設定します。

編集可能な例

const items: AutocompleteItem[] = [
  { 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 (
  <VStack>
    <MultiAutocomplete
      placeholder="キャラクターを選択"
      items={items}
      allowCreate
      insertPositionItem="first"
    />
    <MultiAutocomplete
      placeholder="キャラクターを選択"
      items={items}
      allowCreate
      insertPositionItem="last"
    />
    <MultiAutocomplete
      placeholder="キャラクターを選択"
      items={items}
      allowCreate
      insertPositionItem="地球人"
    />
    <MultiAutocomplete
      placeholder="キャラクターを選択"
      items={items}
      allowCreate
      insertPositionItem={["フリーザ軍", "last"]}
    />
  </VStack>
)
Copied!

自由な入力を許可する

デフォルトでは、ブラー時に候補にない値はクリアされます。候補にない値をクリアせず、自由な入力を許可する場合は、allowFreeをtrueに設定します。

編集可能な例

const items: AutocompleteItem[] = [
  { 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 (
  <MultiAutocomplete placeholder="キャラクターを選択" items={items} allowFree />
)
Copied!

ボーダーのカラーを変更する

ボーダーのカラーを変更する場合は、focusBorderColorまたはerrorBorderColorにカラーを設定します。

編集可能な例

<VStack>
  <MultiAutocomplete
    focusBorderColor="green.500"
    placeholder="custom border color"
  >
    <AutocompleteOption value="孫悟空">孫悟空</AutocompleteOption>
    <AutocompleteOption value="ベジータ">ベジータ</AutocompleteOption>
    <AutocompleteOption value="フリーザ">フリーザ</AutocompleteOption>
  </MultiAutocomplete>

  <MultiAutocomplete
    isInvalid
    errorBorderColor="orange.500"
    placeholder="custom border color"
  >
    <AutocompleteOption value="孫悟空">孫悟空</AutocompleteOption>
    <AutocompleteOption value="ベジータ">ベジータ</AutocompleteOption>
    <AutocompleteOption value="フリーザ">フリーザ</AutocompleteOption>
  </MultiAutocomplete>
</VStack>
Copied!

区切りをカスタマイズする

区切りをカスタマイズする場合は、separatorに文字列を設定します。

編集可能な例

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

プレースホルダーを常に表示する

プレースホルダーを常に表示する場合は、keepPlaceholderをtrueに設定します。

編集可能な例

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

カスタムコンポーネントを使用する

カスタムコンポーネントを使用する場合は、componentにReactElementを設定します。componentは、value, label, index, onRemoveを提供します。

編集可能な例

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

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

選択済みの値をリストから除外する

選択済みの値をリストから除外する場合は、omitSelectedValuesをtrueに設定します。

編集可能な例

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

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

選択可能な最大数を設定する

選択可能な最大数を設定する場合は、maxSelectValuesに数値を設定します。

編集可能な例

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

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

選択時にドロップダウンリストを閉じる

選択時にドロップダウンリストを閉じる場合は、closeOnSelectをtrueに設定します。

編集可能な例

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

クリアを無効化する

クリアを無効化する場合は、isClearableをfalseに設定します。

編集可能な例

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

表示位置を変更する

表示位置を変更するには、placementにtopやleft-startなどを設定します。デフォルトでは、bottomが設定されています。

編集可能な例

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

オフセットを変更する

要素の大きさやシチュエーションによっては、ツールチップの位置を変更したい場合があります。その場合は、gutterまたはoffsetで位置を調整します。

gutterは、単純な要素との差を設定でき、offsetは、[横軸, 縦軸]を設定できます。

編集可能な例

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

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

無効化する

無効化する場合は、isDisabledをtrueに設定します。

編集可能な例

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

  <FormControl
    isDisabled
    label="Which notifications would you like to receive?"
  >
    <MultiAutocomplete placeholder="Autocomplete notifications" />
  </FormControl>
</>
Copied!

オプションを無効にする場合は、AutocompleteOptionにisDisabledをtrueに設定します。

編集可能な例

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

読み取り専用にする

読み取り専用にする場合は、isReadOnlyをtrueに設定します。

編集可能な例

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

  <FormControl
    isReadOnly
    label="Which notifications would you like to receive?"
  >
    <MultiAutocomplete placeholder="Autocomplete notifications" />
  </FormControl>
</>
Copied!

無効な入力にする

無効な入力にする場合は、isInvalidをtrueに設定します。

編集可能な例

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

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

オプションをカスタマイズする

アイコンをカスタマイズする場合は、iconPropsまたはclearIconPropsにpropsを設定します。

編集可能な例

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

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

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

オプションをカスタマイズする

オプションをカスタマイズするには、optionPropsプロパティを使用します。

編集可能な例

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

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

制御する

編集可能な例

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

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

React Hook Formを使う

編集可能な例

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.autocomplete}
      label="Who is your favorite character?"
      errorMessage={
        errors.autocomplete ? errors.autocomplete.message : undefined
      }
    >
      <Controller
        name="autocomplete"
        control={control}
        rules={{ required: { value: true, message: "This is required." } }}
        render={({ field }) => (
          <MultiAutocomplete placeholder="キャラクターを選択" {...field}>
            <AutocompleteOption value="孫悟空">孫悟空</AutocompleteOption>
            <AutocompleteOption value="ベジータ">ベジータ</AutocompleteOption>
            <AutocompleteOption value="フリーザ">フリーザ</AutocompleteOption>
          </MultiAutocomplete>
        )}
      />
    </FormControl>

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

GitHubでこのページを編集する

前Autocomplete次DatePicker