テキストエリア
テキストエリアコンポーネントは、複数行の入力を可能にし、長いテキストを記述できるものです。
インストール
npx nextui-cli@latest add input
上記のコマンドは個別のインストール専用です。 @nextui-org/react
がグローバルにインストール済みの場合は、このステップをスキップできます。
インポート
使用方法
無効
読み取り専用
必須
入力にisRequired
プロパティを渡すと、ラベルの最後にdanger
のアスタリスクが表示され、テキストエリアが必須になります。
自動サイズ調整
テキストエリアはコンテンツに基づいて自動的に拡大しますが、minRows
およびmaxRows
プロパティを使用して最小および最大の高さを設定することもできます。これはreact-textarea-autosizeに基づいています。
自動サイズ調整なし
自動サイズ調整機能を無効にしたい場合は、disableAutosize
プロパティを使用できます。
バリアント
エラーメッセージ付き
isInvalid
プロパティと errorMessage
プロパティを組み合わせて、無効なテキストエリアを表示できます。
説明
制御
value
プロパティと onValueChange
プロパティを使用して、入力値を制御できます。
注: NextUI の
Textarea
は、onChange
のようなネイティブイベントもサポートしており、Formik や React Hook Form のようなフォームライブラリで役立ちます。
スロット
- base: 入力ラッパーで、配置、位置、および全体的な外観を処理します。
- label: テキストエリアのラベルで、テキストエリアの上、内側、または左側に表示されるものです。
- inputWrapper:
label
(内側にある場合) およびinnerWrapper
をラップします。 - input: テキストエリアの入力要素です。
- description: テキストエリアの説明です。
- errorMessage: テキストエリアのエラーメッセージです。
データ属性
Textarea
の base
要素には、次の属性があります。
- data-invalid: テキストエリアが無効な場合。
isInvalid
プロパティに基づきます。 - data-required: テキストエリアが必須の場合。
isRequired
プロパティに基づきます。 - data-readonly: テキストエリアが読み取り専用の場合。
isReadOnly
プロパティに基づきます。 - data-hover: テキストエリアがホバーされている場合。useHover に基づきます。
- data-focus: テキストエリアがフォーカスされている場合。useFocusRing に基づきます。
- data-focus-visible: キーボードでテキストエリアがフォーカスされている場合。useFocusRing に基づきます。
- data-disabled: テキストエリアが無効になっている場合。
isDisabled
プロパティに基づきます。
アクセシビリティ
- ネイティブの
<input>
要素を使用して構築されています。 - 視覚および ARIA ラベル付けをサポートします。
- 変更、クリップボード、合成、選択、および入力イベントをサポートします。
- 必須および無効の状態を ARIA を介して支援技術に公開します。
- ARIA を介して入力にリンクされた説明とエラーメッセージのヘルプテキストをサポートします。
API
テキストエリアのプロパティ
属性 | タイプ | 説明 | デフォルト |
---|---|---|---|
children | ReactNode | textarea のコンテンツ。 | - |
minRows | number | 表示する最小行数。 | 3 |
maxRows | number | textarea が拡大できる最大行数。 | 8 |
cacheMeasurements | boolean | textarea の高さを計算する際に、以前に計算された測定値を再利用します。 | false |
variant | flat | bordered | faded | underlined | textarea のバリアント。 | flat |
color | default | primary | secondary | success | warning | danger | textarea の色。 | default |
size | sm |md |lg | textarea のサイズ。 | md |
radius | none | sm | md | lg | full | textarea の角の丸み。 | - |
label | ReactNode | ラベルとして表示するコンテンツ。 | - |
value | string | textarea の現在の値(制御された状態)。 | - |
defaultValue | string | textarea のデフォルト値(非制御状態)。 | - |
placeholder | string | textarea のプレースホルダー。 | - |
startContent | ReactNode | 入力の左側にレンダリングされる要素。 | - |
endContent | ReactNode | 入力の右側にレンダリングされる要素。 | - |
description | ReactNode | textarea の説明。選択する内容に関する具体的な要件などのヒントを提供します。 | - |
errorMessage | ReactNode | ((v: ValidationResult) => ReactNode) | textarea のエラーメッセージ。 | - |
validate | (value: string) => ValidationError | true | null | undefined | コミット時(例:blur時)に入力値を検証し、無効な値に対してエラーメッセージを返します。validationBehavior が native に設定されている場合、フォーム送信時に検証エラーが表示されます。リアルタイム検証の場合は、isInvalid プロパティを使用してください。 | - |
validationBehavior | native | aria | 値が欠落しているか無効な場合にフォーム送信を防ぐためにネイティブの HTML フォーム検証を使用するか、ARIA を介してフィールドを必須または無効としてマークするかどうか。 | aria |
labelPlacement | inside | outside | outside-left | ラベルの位置。 | inside |
fullWidth | boolean | textarea が親の幅を占めるかどうか。 | true |
isRequired | boolean | フォーム送信前に textarea でユーザー入力が必要かどうか。 | false |
isReadOnly | boolean | textarea が選択可能だがユーザーによって変更できないかどうか。 | |
isDisabled | boolean | textarea が無効かどうか。 | false |
isInvalid | boolean | textarea が無効かどうか。 | false |
validationState | valid | invalid | textarea に「有効」または「無効」の視覚的なスタイルを表示するかどうか。(非推奨)代わりにisInvalidを使用してください。 | - |
disableAutosize | boolean | textarea の自動垂直リサイズを無効にするかどうか。 | false |
disableAnimation | boolean | textarea をアニメーション化するかどうか。 | false |
classNames | Record<"base"| "label"| "inputWrapper"| "innerWrapper" | "input" | "description" | "errorMessage", string> | チェックボックスのスロットにカスタムクラス名をセットできます。 | - |
入力イベント
属性 | タイプ | 説明 |
---|---|---|
onChange | React.ChangeEvent <HTMLInputElement> | 要素の値が変更されたときに呼び出されるハンドラー。 event.target.value (string)にアクセスすることで新しい値を取得できます。 |
onValueChange | (value: string) => void | 要素の値が変更されたときに呼び出されるハンドラー。 |
onClear | () => void | クリアボタンがクリックされたときに呼び出されるハンドラー。 |
onHeightChange | (height: number, meta: { rowHeight: number }) => void | textarea の高さが変更されたときに呼び出されるハンドラー。 |