InputGroup

InputGroup displays text, icon, buttons and other content can be grouped next to an input.

Usage#

import { InputGroup } from 'primereact/inputgroup';
<InputGroup>
    <InputGroup.Addon />
</InputGroup>

Examples#

Basic#

A group is created by wrapping the input and add-ons with the InputGroup component. Each add-on element is defined as a child of InputGroup.Addon component.

www
import { InputGroup } from 'primereact/inputgroup';
import { InputText } from 'primereact/inputtext';
 
export default function BasicDemo() {
    return (
        <div className="card grid grid-cols-1 md:grid-cols-2 gap-4">
            <InputGroup>
                <InputGroup.Addon>
                    <i className="pi pi-user"></i>
                </InputGroup.Addon>
                <InputText placeholder="Username" />
            </InputGroup>
 
            <InputGroup>
                <InputGroup.Addon>www</InputGroup.Addon>
                <InputText placeholder="Website" />
            </InputGroup>
        </div>
    );
}

Multiple#

Multiple add-ons can be placed inside the same group.

$
.00
import { InputGroup } from 'primereact/inputgroup';
import { InputText } from 'primereact/inputtext';
 
export default function MultipleDemo() {
    return (
        <div className="card flex justify-center">
            <InputGroup className="sm:!w-96">
                <InputGroup.Addon>
                    <i className="pi pi-clock"></i>
                </InputGroup.Addon>
                <InputGroup.Addon>
                    <i className="pi pi-star-fill"></i>
                </InputGroup.Addon>
                <InputText placeholder="Price" />
                <InputGroup.Addon>$</InputGroup.Addon>
                <InputGroup.Addon>.00</InputGroup.Addon>
            </InputGroup>
        </div>
    );
}

Button#

Buttons can be placed at either side of an input element.

import { Button } from 'primereact/button';
import { InputGroup } from 'primereact/inputgroup';
import { InputText } from 'primereact/inputtext';
 
export default function ButtonDemo() {
    return (
        <div className="card flex flex-col md:flex-row gap-4">
            <InputGroup>
                <Button>Search</Button>
                <InputText placeholder="Keyword" />
            </InputGroup>
 
            <InputGroup>
                <InputText placeholder="Keyword" />
                <InputGroup.Addon>
                    <Button severity="secondary" variant="text">
                        <i className="pi pi-search" />
                    </Button>
                </InputGroup.Addon>
            </InputGroup>
 
            <InputGroup>
                <InputGroup.Addon>
                    <Button severity="secondary">
                        <i className="pi pi-check" />
                    </Button>
                </InputGroup.Addon>
                <InputText placeholder="Vote" />
                <InputGroup.Addon>
                    <Button severity="secondary">
                        <i className="pi pi-times" />
                    </Button>
                </InputGroup.Addon>
            </InputGroup>
        </div>
    );
}

Checkbox & Radio#

Checkbox and RadioButton components can be combined with an input element under the same group.

import { Checkbox } from 'primereact/checkbox';
import { InputGroup } from 'primereact/inputgroup';
import { InputText } from 'primereact/inputtext';
import { RadioButton } from 'primereact/radiobutton';
 
export default function CheckboxRadioDemo() {
    return (
        <div className="card flex flex-col md:flex-row gap-4">
            <InputGroup>
                <InputText placeholder="Price" />
                <InputGroup.Addon>
                    <RadioButton name="rb1" value="rb1" />
                </InputGroup.Addon>
            </InputGroup>
 
            <InputGroup>
                <InputGroup.Addon>
                    <Checkbox />
                </InputGroup.Addon>
                <InputText placeholder="Username" />
            </InputGroup>
 
            <InputGroup>
                <InputGroup.Addon>
                    <Checkbox />
                </InputGroup.Addon>
                <InputText placeholder="Website" />
                <InputGroup.Addon>
                    <RadioButton name="rb2" value="rb2" />
                </InputGroup.Addon>
            </InputGroup>
        </div>
    );
}

Float Label#

FloatLabel visually integrates a label with its form element. Visit FloatLabel documentation for more information.

$
.00
www
import { InputGroup } from 'primereact/inputgroup';
import { InputText } from 'primereact/inputtext';
import { Label } from 'primereact/label';
import * as React from 'react';
 
export default function FloatLabelDemo() {
    const [value1, setValue1] = React.useState('');
    const [value2, setValue2] = React.useState('');
    const [value3, setValue3] = React.useState('');
 
    return (
        <div className="card flex flex-col md:items-end md:flex-row gap-4">
            <InputGroup>
                <InputGroup.Addon>
                    <i className="pi pi-user"></i>
                </InputGroup.Addon>
                <Label.Float>
                    <InputText id="over_label" value={value1} onInput={(e: React.FormEvent<HTMLInputElement>) => setValue1(e.currentTarget.value)} />
                    <Label htmlFor="over_label">Over Label</Label>
                </Label.Float>
            </InputGroup>
 
            <InputGroup>
                <InputGroup.Addon>$</InputGroup.Addon>
                <Label.Float variant="in">
                    <InputText id="in_label" value={value2} onInput={(e: React.FormEvent<HTMLInputElement>) => setValue2(e.currentTarget.value)} />
                    <Label htmlFor="in_label">In Label</Label>
                </Label.Float>
                <InputGroup.Addon>.00</InputGroup.Addon>
            </InputGroup>
 
            <InputGroup>
                <InputGroup.Addon>www</InputGroup.Addon>
                <Label.Float variant="on">
                    <InputText id="on_label" value={value3} onInput={(e: React.FormEvent<HTMLInputElement>) => setValue3(e.currentTarget.value)} />
                    <Label htmlFor="on_label">On Label</Label>
                </Label.Float>
            </InputGroup>
        </div>
    );
}

Ifta Label#

IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.

import { InputGroup } from 'primereact/inputgroup';
import { InputText } from 'primereact/inputtext';
import { Label } from 'primereact/label';
 
export default function IftaLabelDemo() {
    return (
        <div className="card flex justify-center">
            <InputGroup>
                <InputGroup.Addon>
                    <i className="pi pi-user"></i>
                </InputGroup.Addon>
                <Label.Ifta>
                    <InputText id="name" defaultValue="Amy" />
                    <Label htmlFor="name">Name</Label>
                </Label.Ifta>
            </InputGroup>
        </div>
    );
}

Accessibility#

Screen Reader#

InputGroup and InputGroupAddon do not require any roles and attributes.

Keyboard Support#

Components does not include any interactive elements.

PrimeReact 11.0.0-alpha.5 on React by PrimeTek