メンションMentionExperimental

@ などのトリガー文字で候補を表示し、テキストエリアへメンションを挿入します。

プレビュー

状態とバリエーション

メンション候補

`@` 以降の入力に一致する候補を表示し、Enter キーまたはクリックで挿入します。

トリガー文字の変更

メンション以外の用途では、`#` のような別のトリガー文字も使えます。

無効化

編集できない理由はツールチップと補足文で伝えます。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
valuestring-テキストエリアに表示する現在の入力内容です。
onValueChange(value: string) => void-入力、または候補の挿入で値が変わった時に呼ばれます。
triggerstring'@'候補リストを開くための文字です。
optionsMentionOption[]-候補として表示する項目です。`id`、`label`、任意の `hint` を渡します。
maxSuggestionsnumber6一度に表示する候補数の上限です。
placeholder / disabled / rowsTextareaHTMLAttributes-テキストエリアに渡せる標準属性を指定できます。

使い方

import { FormControl, FormGroup, FormLabel, Mention } from "@gunjo/ui";

export function MessageField() {
  const [text, setText] = React.useState("");

  return (
    <FormGroup className="w-full max-w-sm">
      <FormLabel htmlFor="message">メッセージ</FormLabel>
      <FormControl>
        <Mention
          id="message"
          options={teamMembers}
          value={text}
          onValueChange={setText}
          trigger="@"
          placeholder="@ を入力して担当者をメンション"
        />
      </FormControl>
    </FormGroup>
  );
}

使用コンポーネント

MentionTextareaFormGroupFormLabelFormControl

関連コンポーネント

CommandComboboxTagInputTooltip