テキストエリアTextareaBeta

テキストエリア、またはテキストエリア風のコンポーネントを表示します。

プレビュー

状態とバリエーション

ラベル付き

ラベル、入力欄、補足文を同じ幅で揃えます。

複数行の説明や補足を入力できます。

文字数カウンター

残り文字数を表示し、送信前に入力制限を確認できます。

残り 100 文字

文字数カウント（組み込み）

showCount を付けるだけでカウント表示が出ます。maxLength と併用で count / max 形式に。

20 / 120

バリデーションエラー

エラー時は aria-invalid と destructive 色の補足文で伝えます。

本文は10文字以上で入力してください。

無効化

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

変更が必要な場合は承認を取り消してください。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
labelReactNode-コントロール上部に表示し htmlFor で関連付けるラベルです（Select / Checkbox と同様）。
descriptionReactNode-コントロール下の補助テキストです。aria-describedby で関連付きます。
showCountbooleanfalseコントロール下に文字数を表示します。maxLength と併用すると count / max 形式になり、aria-describedby で関連付きます。
value / defaultValuestring-入力値です。制御・非制御のどちらでも使えます。
onChangeReact.ChangeEventHandler<HTMLTextAreaElement>-入力内容が変わった時に呼ばれます。
rowsnumber-表示する行数です。
placeholderstring-未入力時に表示する補助テキストです。
disabledbooleanfalse編集できない状態にします。理由はツールチップで補足します。
aria-invalidboolean-入力エラー状態を支援技術と視覚表現へ伝えます。

使い方

import * as React from "react";
import { FormControl, FormDescription, FormGroup, FormLabel, Textarea } from "@gunjo/ui";

const LIMIT = 120;

export function MemoField() {
  const [value, setValue] = React.useState("");

  return (
    <FormGroup className="w-full max-w-sm">
      <FormLabel htmlFor="memo">メモ</FormLabel>
      <FormControl>
        <Textarea
          id="memo"
          value={value}
          onChange={(event) => setValue(event.currentTarget.value)}
          maxLength={LIMIT}
          rows={4}
        />
      </FormControl>
      <FormDescription>複数行の説明や補足を入力できます。</FormDescription>
    </FormGroup>
  );
}

使用コンポーネント

TextareaFormGroupFormLabelFormControlFormDescription

関連コンポーネント

InputEditableFieldMentionForm

設計の判断（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。

UIコンポーネント: Textarea