InputGroup

テキスト、アイコン、ボタン、その他のコンテンツを入力要素の横にグループ化できます。

基本#

InputGroup は、入力要素とアドオンを `p-inputgroup` クラスを持つ要素でラップし、アドオンも `.p-inputgroup-addon` クラスを持つ要素内に配置することで作成します。

$.00

www


<div className="p-inputgroup flex-1">
    <span className="p-inputgroup-addon">
        <i className="pi pi-user"></i>
    </span>
    <InputText placeholder="Username" />
</div>

<div className="p-inputgroup flex-1">
    <span className="p-inputgroup-addon">$</span>
    <InputNumber placeholder="Price" />
    <span className="p-inputgroup-addon">.00</span>
</div>

<div className="p-inputgroup flex-1">
    <span className="p-inputgroup-addon">www</span>
    <InputText placeholder="Website" />
</div>

複数#

複数のアドオンを同じグループ内に配置できます。

$.00


<div className="p-inputgroup w-full md:w-30rem">
    <span className="p-inputgroup-addon">
        <i className="pi pi-clock"></i>
    </span>
    <span className="p-inputgroup-addon">
        <i className="pi pi-star-fill"></i>
    </span>
    <InputNumber placeholder="Price" />
    <span className="p-inputgroup-addon">$</span>
    <span className="p-inputgroup-addon">.00</span>
</div>

ボタン#

ボタンを入力要素のどちら側にも配置できます。


<div className="p-inputgroup flex-1">
    <Button label="Search" />
    <InputText placeholder="Keyword" />
</div>

<div className="p-inputgroup flex-1">
    <InputText placeholder="Keyword" />
    <Button icon="pi pi-search" className="p-button-warning" />
</div>

<div className="p-inputgroup flex-1">
    <Button icon="pi pi-check" className="p-button-success" />
    <InputText placeholder="Vote" />
    <Button icon="pi pi-times" className="p-button-danger" />
</div>

チェックボックスとラジオボタン#

チェックボックスとラジオボタンコンポーネントは、同じグループ内で入力要素と組み合わせることができます。


<div className="p-inputgroup flex-1">
    <InputText placeholder="Price" />
    <span className="p-inputgroup-addon">
        <RadioButton name="rb1" value="rb1" checked={radioValue === 'rb1'} onChange={(e) => setRadioValue(e.value)} />
    </span>
</div>

<div className="p-inputgroup flex-1">
    <span className="p-inputgroup-addon">
        <Checkbox checked={checked1} onChange={(e) => setChecked1(!checked1)} />
    </span>
    <InputText placeholder="Username" />
</div>

<div className="p-inputgroup flex-1">
    <span className="p-inputgroup-addon">
        <Checkbox checked={checked2} onChange={(e) => setChecked2(!checked2)} />
    </span>
    <InputText placeholder="Website" />
    <span className="p-inputgroup-addon">
        <RadioButton name="rb2" value="rb2" checked={radioValue === 'rb2'} onChange={(e) => setRadioValue(e.value)} />
    </span>
</div>