React Ariaで実装したラベル付きのテキスト入力欄。前後の補助要素、ヒント、必須・無効の状態に対応し、フォーカスリングをクロスフェードで表示します。
この入力コンポーネントを CLI または手動で追加できます。
ダークモード対応：この コンポーネント はBoardUIのセマンティックトークンに合わせて自動で切り替わります。 テーマスイッチの設定.
CLIがコンポーネントのソースと内部の依存ファイルをプロジェクトにコピーし、必要なnpmパッケージをインストールします。
npx boardui@latest add input
共有UIパッケージや独自のインポートエイリアスを使う場合は、 インストールパスの設定 をCLIの実行前に設定してください。コピー＆ペーストの例は、標準のインポートを使います。
errorMessage は、フィールドが無効な間、React Aria のエラースロットでヒントの代わりに表示され、入力欄の説明として関連付けられます。isRequired だけを指定した場合、React Aria は送信時にネイティブ検証を行います。フォームの送信を止め、フィールドを無効にしてフォーカスを移し、ブラウザ独自の吹き出しは表示しないため、利用者に見えるのはこのメッセージです。validationBehavior="aria" を指定すると送信は止まらず、isInvalid を渡したときか validate がエラーを返したときだけフィールドが無効になります。
errorMessage
isRequired
validationBehavior="aria"
isInvalid
validate