テキストエリア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>
  );
}

設計の判断

  • 高さはクラスで決まっていて、rows では変わりません。資料は「rows でだいたいこれくらい書いてほしいという期待量を示す」を挙げています。GUNJO の Textarea は h-20（80px）を持つので、rows を渡しても見た目の高さは変わりません。高さを変えるときは className で h-32 のように上書きすることになります。ここは資料の勧めをそのまま受け取れない場所です。
  • 縦に伸ばす操作は塞いでいない。資料は「resize を CSS で殺す」を禁止に挙げています。GUNJO は resize に一切触れていないので、ブラウザの既定どおり利用者が自分で広げられます。一方で、入力に合わせて自動で伸びる仕組みも持っていません。
  • 文字数は数えるが、色は変えない。showCount を渡すと右下に数が出て、maxLength があれば「いまの数と上限」の形になります。この数は aria-describedby で入力欄に結んであるので、読み上げでも一緒に伝わります。資料が挙げる「残り20から30文字で警告色に変える」は入れていません。maxLength を付ければブラウザ側で入力が止まるので、まず止まることを優先しました。

使用コンポーネント

TextareaFormGroupFormLabelFormControlFormDescription

関連コンポーネント

InputEditableFieldMentionForm

いつ・なぜ使うか（UIXHERO）

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

UIコンポーネント: Textarea