テキストエリア

テキストエリアコンポーネントは、複数行の入力を可能にし、長いテキストを記述できるものです。


インストール

npx nextui-cli@latest add input
上記のコマンドは個別のインストール専用です。 @nextui-org/react がグローバルにインストール済みの場合は、このステップをスキップできます。

インポート

使用方法

無効

読み取り専用

必須

入力にisRequired プロパティを渡すと、ラベルの最後にdangerのアスタリスクが表示され、テキストエリアが必須になります。

自動サイズ調整

テキストエリアはコンテンツに基づいて自動的に拡大しますが、minRowsおよびmaxRowsプロパティを使用して最小および最大の高さを設定することもできます。これはreact-textarea-autosizeに基づいています。

自動サイズ調整なし

自動サイズ調整機能を無効にしたい場合は、disableAutosizeプロパティを使用できます。

バリアント

エラーメッセージ付き

isInvalid プロパティと errorMessage プロパティを組み合わせて、無効なテキストエリアを表示できます。

説明

制御

value プロパティと onValueChange プロパティを使用して、入力値を制御できます。

: NextUI の Textarea は、onChange のようなネイティブイベントもサポートしており、FormikReact Hook Form のようなフォームライブラリで役立ちます。

スロット

  • base: 入力ラッパーで、配置、位置、および全体的な外観を処理します。
  • label: テキストエリアのラベルで、テキストエリアの上、内側、または左側に表示されるものです。
  • inputWrapper: label (内側にある場合) および innerWrapper をラップします。
  • input: テキストエリアの入力要素です。
  • description: テキストエリアの説明です。
  • errorMessage: テキストエリアのエラーメッセージです。

データ属性

Textareabase 要素には、次の属性があります。

  • 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

テキストエリアのプロパティ

属性タイプ説明デフォルト
childrenReactNodetextarea のコンテンツ。-
minRowsnumber表示する最小行数。3
maxRowsnumbertextarea が拡大できる最大行数。8
cacheMeasurementsbooleantextarea の高さを計算する際に、以前に計算された測定値を再利用します。false
variantflat | bordered | faded | underlinedtextarea のバリアント。flat
colordefault | primary | secondary | success | warning | dangertextarea の色。default
sizesm|md|lgtextarea のサイズ。md
radiusnone | sm | md | lg | fulltextarea の角の丸み。-
labelReactNodeラベルとして表示するコンテンツ。-
valuestringtextarea の現在の値(制御された状態)。-
defaultValuestringtextarea のデフォルト値(非制御状態)。-
placeholderstringtextarea のプレースホルダー。-
startContentReactNode入力の左側にレンダリングされる要素。-
endContentReactNode入力の右側にレンダリングされる要素。-
descriptionReactNodetextarea の説明。選択する内容に関する具体的な要件などのヒントを提供します。-
errorMessageReactNode | ((v: ValidationResult) => ReactNode)textarea のエラーメッセージ。-
validate(value: string) => ValidationError | true | null | undefinedコミット時(例:blur時)に入力値を検証し、無効な値に対してエラーメッセージを返します。validationBehaviornative に設定されている場合、フォーム送信時に検証エラーが表示されます。リアルタイム検証の場合は、isInvalid プロパティを使用してください。-
validationBehaviornative | aria値が欠落しているか無効な場合にフォーム送信を防ぐためにネイティブの HTML フォーム検証を使用するか、ARIA を介してフィールドを必須または無効としてマークするかどうか。aria
labelPlacementinside | outside | outside-leftラベルの位置。inside
fullWidthbooleantextarea が親の幅を占めるかどうか。true
isRequiredbooleanフォーム送信前に textarea でユーザー入力が必要かどうか。false
isReadOnlybooleantextarea が選択可能だがユーザーによって変更できないかどうか。
isDisabledbooleantextarea が無効かどうか。false
isInvalidbooleantextarea が無効かどうか。false
validationStatevalid | invalidtextarea に「有効」または「無効」の視覚的なスタイルを表示するかどうか。(非推奨)代わりにisInvalidを使用してください。-
disableAutosizebooleantextarea の自動垂直リサイズを無効にするかどうか。false
disableAnimationbooleantextarea をアニメーション化するかどうか。false
classNamesRecord<"base"| "label"| "inputWrapper"| "innerWrapper" | "input" | "description" | "errorMessage", string>チェックボックスのスロットにカスタムクラス名をセットできます。-

入力イベント

属性タイプ説明
onChangeReact.ChangeEvent <HTMLInputElement>要素の値が変更されたときに呼び出されるハンドラー。 event.target.value (string)にアクセスすることで新しい値を取得できます。
onValueChange(value: string) => void要素の値が変更されたときに呼び出されるハンドラー。
onClear() => voidクリアボタンがクリックされたときに呼び出されるハンドラー。
onHeightChange(height: number, meta: { rowHeight: number }) => voidtextarea の高さが変更されたときに呼び出されるハンドラー。