InputGroup

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

https://

.com

preview

Installation#

npx shadcn@latest add @primereact/inputgroup

Usage#

import { InputGroup, InputGroupAddon } from '@/components/ui/inputgroup';

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

Examples#

Basic#

Combines an input with addons such as buttons or text labels.

www

basic-demo

import { InputGroup, InputGroupAddon } from '@/components/ui/inputgroup';
import { InputText } from '@/components/ui/inputtext';
import { User } from '@primeicons/react';

export default function BasicDemo() {
    return (
        <div className="space-y-4 max-w-xs mx-auto">
            <InputGroup>
                <InputGroupAddon>
                    <User></User>
                </InputGroupAddon>
                <InputText placeholder="Username" />
            </InputGroup>

            <InputGroup>
                <InputGroupAddon>www</InputGroupAddon>
                <InputText placeholder="Website" />
            </InputGroup>
        </div>
    );
}

Multiple#

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 InputGroupAddon component. Multiple add-ons can be placed inside the same group.

.00

multiple-demo

import { Clock, StarFill } from '@primeicons/react';
import { InputGroup, InputGroupAddon } from '@/components/ui/inputgroup';
import { InputNumber } from '@/components/ui/inputnumber';

export default function MultipleDemo() {
    return (
        <div className="max-w-sm mx-auto">
            <InputGroup>
                <InputGroupAddon>
                    <Clock />
                </InputGroupAddon>
                <InputGroupAddon>
                    <StarFill></StarFill>
                </InputGroupAddon>
                <InputNumber placeholder="Price" />
                <InputGroupAddon>$</InputGroupAddon>
                <InputGroupAddon>.00</InputGroupAddon>
            </InputGroup>
        </div>
    );
}

Button#

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

8 results

button-demo

import { Button } from '@/components/ui/button';
import { InputGroup, InputGroupAddon } from '@/components/ui/inputgroup';
import { InputText } from '@/components/ui/inputtext';
import { Check, Search, Times } from '@primeicons/react';

export default function ButtonDemo() {
    return (
        <div className="space-y-4 max-w-xs mx-auto">
            <InputGroup>
                <Button>Search</Button>
                <InputText placeholder="Keyword" className="border-r-0" />
                <InputGroupAddon className="text-xs">8 results</InputGroupAddon>
            </InputGroup>

            <InputGroup>
                <InputText placeholder="Keyword" />
                <InputGroupAddon>
                    <Button severity="secondary" variant="text" iconOnly>
                        <Search />
                    </Button>
                </InputGroupAddon>
            </InputGroup>

            <InputGroup>
                <InputGroupAddon>
                    <Button severity="secondary" iconOnly>
                        <Check />
                    </Button>
                </InputGroupAddon>
                <InputText placeholder="Vote" />
                <InputGroupAddon>
                    <Button severity="secondary" iconOnly>
                        <Times />
                    </Button>
                </InputGroupAddon>
            </InputGroup>
        </div>
    );
}

Checkbox & Radio#

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

checkbox-radio-demo

'use client';
import { Check } from '@primeicons/react';
import { Checkbox } from '@/components/ui/checkbox';
import { InputGroup, InputGroupAddon } from '@/components/ui/inputgroup';
import { InputText } from '@/components/ui/inputtext';
import { RadioButton } from '@/components/ui/radiobutton';

export default function CheckboxRadioDemo() {
    return (
        <div className="space-y-4 max-w-xs mx-auto">
            <InputGroup>
                <InputText placeholder="Price" />
                <InputGroupAddon>
                    <RadioButton />
                </InputGroupAddon>
            </InputGroup>

            <InputGroup>
                <InputGroupAddon>
                    <Checkbox />
                </InputGroupAddon>
                <InputText placeholder="Username" />
            </InputGroup>

            <InputGroup>
                <InputGroupAddon>
                    <Checkbox />
                </InputGroupAddon>
                <InputText placeholder="Website" />
                <InputGroupAddon>
                    <RadioButton />
                </InputGroupAddon>
            </InputGroup>
        </div>
    );
}

Select#

A Select component can be used within an InputGroup alongside other add-ons and inputs.

www

select-demo

'use client';
import { MapMarker } from '@primeicons/react';
import { InputGroup, InputGroupAddon } from '@/components/ui/inputgroup';
import { InputText } from '@/components/ui/inputtext';
import {
    Select,
    SelectList,
    SelectPopup,
    SelectPortal,
    SelectPositioner,
    SelectTrigger,
    SelectValue,
    type SelectValueChangeEvent
} from '@/components/ui/select';
import * as React from 'react';

const cities = [
    { label: 'Select a City', value: '' },
    { label: 'New York', value: 'ny' },
    { label: 'Rome', value: 'rm' },
    { label: 'London', value: 'ldn' },
    { label: 'Istanbul', value: 'ist' },
    { label: 'Paris', value: 'prs' }
];

export default function SelectDemo() {
    const [city, setCity] = React.useState<string>('');
    const [city2, setCity2] = React.useState<string>('');

    return (
        <div className="space-y-4 max-w-md mx-auto">
            <InputGroup>
                <InputGroupAddon>
                    <MapMarker />
                </InputGroupAddon>
                <Select
                    value={city}
                    onValueChange={(e: SelectValueChangeEvent) => setCity(e.value as string)}
                    options={cities}
                    optionLabel="label"
                    optionValue="value"
                    className="flex-1"
                >
                    <SelectTrigger>
                        <SelectValue placeholder="Select a City" />
                    </SelectTrigger>
                    <SelectPortal>
                        <SelectPositioner>
                            <SelectPopup>
                                <SelectList />
                            </SelectPopup>
                        </SelectPositioner>
                    </SelectPortal>
                </Select>
            </InputGroup>

            <InputGroup>
                <InputGroupAddon>www</InputGroupAddon>
                <InputText placeholder="Website" className="border-r-0" />
                <Select
                    value={city2}
                    onValueChange={(e: SelectValueChangeEvent) => setCity2(e.value as string)}
                    options={cities}
                    optionLabel="label"
                    optionValue="value"
                    className="flex-1"
                >
                    <SelectTrigger>
                        <SelectValue placeholder="Select a City" />
                    </SelectTrigger>
                    <SelectPortal>
                        <SelectPositioner>
                            <SelectPopup>
                                <SelectList />
                            </SelectPopup>
                        </SelectPositioner>
                    </SelectPortal>
                </Select>
            </InputGroup>
        </div>
    );
}

Accessibility#

InputGroup and InputGroupAddon do not require any roles and attributes.

Keyboard Support#

Component does not include any interactive elements.