InputGroup

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

インポート #


import InputGroup from 'primevue/inputgroup';
import InputGroupAddon from 'primevue/inputgroupaddon';

基本 #

グループは、入力とアドオンをInputGroupコンポーネントでラップすることで作成されます。各アドオン要素は、InputGroupAddonコンポーネントの子として定義されます。

.00

www


<InputGroup>
    <InputGroupAddon>
        <i class="pi pi-user"></i>
    </InputGroupAddon>
    <InputText placeholder="Username" />
</InputGroup>

<InputGroup>
    <InputGroupAddon>$</InputGroupAddon>
    <InputNumber placeholder="Price" />
    <InputGroupAddon>.00</InputGroupAddon>
</InputGroup>

<InputGroup>
    <InputGroupAddon>www</InputGroupAddon>
    <InputText placeholder="Website" />
</InputGroup>

複数 #

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

.00


<InputGroup class="w-full md:w-[30rem]">
    <InputGroupAddon>
        <i class="pi pi-clock"></i>
    </InputGroupAddon>
    <InputGroupAddon>
        <i class="pi pi-star-fill"></i>
    </InputGroupAddon>
    <InputNumber placeholder="Price" />
    <InputGroupAddon>$</InputGroupAddon>
    <InputGroupAddon>.00</InputGroupAddon>
</InputGroup>

ボタン #

ボタンは、入力要素の両側に配置できます。


<InputGroup>
    <Button label="Search" />
    <InputText placeholder="Keyword" />
</InputGroup>

<InputGroup>
    <InputText placeholder="Keyword" />
    <Button icon="pi pi-search" severity="warn" />
</InputGroup>

<InputGroup>
    <Button icon="pi pi-check" severity="success" />
    <InputText placeholder="Vote" />
    <Button icon="pi pi-times" severity="danger" />
</InputGroup>

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

CheckboxおよびRadioButtonコンポーネントは、同じグループ内の入力要素と組み合わせることができます。


<InputGroup>
    <InputText placeholder="Price" />
    <InputGroupAddon>
        <RadioButton v-model="radioValue1" name="rb1" value="rb1" />
    </InputGroupAddon>
</InputGroup>

<InputGroup>
    <InputGroupAddon>
        <Checkbox v-model="checked1" :binary="true" />
    </InputGroupAddon>
    <InputText placeholder="Username" />
</InputGroup>

<InputGroup>
    <InputGroupAddon>
        <Checkbox v-model="checked2" :binary="true" />
    </InputGroupAddon>
    <InputText placeholder="Website" />
    <InputGroupAddon>
        <RadioButton v-model="radioValue2" name="rb2" value="rb2" />
    </InputGroupAddon>
</InputGroup>

アクセシビリティ #

スクリーンリーダー

InputGroupおよびInputGroupAddonには、ロールと属性は不要です。

キーボードサポート

コンポーネントには、インタラクティブな要素は含まれていません。