インプット

インプットは、ユーザーがテキストを入力できるようにするコンポーネントです。フォーム、検索フィールドなどでユーザー入力を取得するために使用できます。

インストール

npx nextui-cli@latest add input

上記のコマンドは、個別インストール専用です。もし、 @nextui-org/react がグローバルにインストールされている場合は、このステップを省略できます。

インポート

使用法

無効

読み取り専用

必須

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

サイズ

色

バリアント

半径

ラベル配置

labelPlacementプロパティをinside、outside、またはoutside-leftに設定することで、ラベルの位置を変更できます。

注:labelが渡されない場合、labelPlacementプロパティはデフォルトでoutsideになります。

パスワード入力

typeプロパティを使用して、インプットタイプをpasswordに変更できます。

クリアボタン

インプットにisClearableプロパティを渡すと、インプットの最後にクリアボタンが表示され、インプットに値がある場合に表示されます。

開始＆終了コンテンツ

startContentプロパティとendContentプロパティを使用して、インプットの開始と終了にコンテンツを追加できます。

説明付き

descriptionプロパティを渡すことで、インプットに説明を追加できます。

エラーメッセージ付き

isInvalidプロパティとerrorMessageプロパティを組み合わせることで、無効なインプットを表示できます。errorMessageは、isInvalidがtrueに設定されている場合にのみ表示されます。

例：regex を使用したメールアドレスの検証

制御された入力

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

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

スロット

• base: 入力ラッパー。配置、位置、および全体的な外観を処理します。
• label: 入力のラベル。入力の上、内側、または左側に表示されます。
• mainWrapper: 位置が outside / outside-left の場合に inputWrapper をラップします。
• inputWrapper: label (内側にある場合) と innerWrapper をラップします。
• innerWrapper: input, startContent, および endContent をラップします。
• input: 入力要素。
• clearButton: 入力の末尾にあるクリアボタン。
• helperWrapper: description と errorMessage をラップします。
• description: 入力の説明。
• errorMessage: 入力のエラーメッセージ。

カスタムスタイル

カスタムの Tailwind CSS クラスをコンポーネントのスロットに渡すことで、Input コンポーネントをカスタマイズできます。

カスタム実装

入力をさらにカスタマイズする必要がある場合は、useInput フックを使用して独自の実装を作成できます。

データ属性

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

• data-invalid: 入力が無効な場合。isInvalid プロパティに基づきます。
• data-required: 入力が必須の場合。isRequired プロパティに基づきます。
• data-readonly: 入力が読み取り専用の場合。isReadOnly プロパティに基づきます。
• data-hover: 入力がホバーされている場合。useHover に基づきます。
• data-focus: 入力がフォーカスされている場合。useFocusRing に基づきます。
• data-focus-within: 入力またはその子要素のいずれかがフォーカスされている場合。useFocusWithin に基づきます。
• data-focus-visible: キーボードで入力がフォーカスされている場合。useFocusRing に基づきます。
• data-disabled: 入力が無効になっている場合。isDisabled プロパティに基づきます。

アクセシビリティ

• ネイティブの <input> 要素で構築されています。
• 視覚的なラベル付けと ARIA ラベル付けをサポートします。
• change、clipboard、composition、selection、input イベントをサポートします。
• 必須および無効な状態を ARIA を介して支援技術に公開します。
• ARIA を介して入力にリンクされた説明とエラーメッセージのヘルプテキストをサポートします。

API

Input Props

Input Events