テキスト入力

InputTextは、テーマとキーフィルタリングを備えた標準的な入力要素の拡張機能です。

インポート#


import { InputText } from 'primereact/inputtext';
         

基本#

InputTextは、valueプロパティとonChangeプロパティを使用して制御された入力として使用されます。


<InputText value={value} onChange={(e) => setValue(e.target.value)} />
         

キーフィルター#

InputTextは、特定のキーをブロックする組み込みのキーフィルタリングサポートを備えています。詳細については、キーフィルターページを参照してください。


<InputText keyfilter="int" placeholder="Integers" />
         

サイズ#

入力要素のサイズを縮小するには.p-inputtext-smを、拡大するには.p-inputtext-lgを適用します。


<InputText type="text" className="p-inputtext-sm" placeholder="Small" />
<InputText type="text" placeholder="Normal" />
<InputText type="text" className="p-inputtext-lg" placeholder="Large" />
         

ヘルプテキスト#

アドバイステキストは、セマンティックなsmallタグで定義できます。

パスワードをリセットするには、ユーザー名を入力してください。

<div className="flex flex-column gap-2">
    <label htmlFor="username">Username</label>
    <InputText id="username" aria-describedby="username-help" />
    <small id="username-help">
        Enter your username to reset your password.
    </small>
</div>
         

フロートラベル#

フォーカス時に、入力フィールドの上にフロートラベルが表示されます。詳細については、フロートラベルのドキュメントを参照してください。


<FloatLabel>
    <InputText id="username" value={value} onChange={(e) => setValue(e.target.value)} />
    <label htmlFor="username">Username</label>
</FloatLabel>
         

塗りつぶし#

variantプロパティをfilledとして指定すると、デフォルトのoutlinedスタイルよりも視覚的な強調表示が大きくなります。


<InputText variant="filled" value={value} onChange={(e) => setValue(e.target.value)} />
         

無効#

invalidプロパティを使用して無効状態が表示され、検証の失敗を示します。フォーム検証ライブラリと統合する際にこのスタイルを使用できます。


<InputText invalid />
         

無効#

disabledが存在する場合、要素は編集およびフォーカスできません。


<InputText disabled placeholder="Disabled" />
         

アクセシビリティ#

スクリーンリーダー

InputTextコンポーネントはネイティブの入力要素をレンダリングし、暗黙的に渡されたプロパティを含みます。コンポーネントの説明は、labelタグとidプロパティを組み合わせるか、aria-labelledby、 aria-labelプロパティを使用して提供できます。


<label htmlFor="firstname">Firstname</label>
<InputText id="firstname" />

<span id="lastname">Lastname</span>
<InputText aria-labelledby="lastname" />

<InputText aria-label="Age"/>
     

キーボードサポート

キー機能
tab入力にフォーカスを移動します。
                      PrimeReact 10.8.3 by PrimeTek