Input Group
A flexible component for grouping inputs with addons, buttons, and other elements.
Input Group groups Input and
Textarea with addons and text, forwarding a press on an
addon into the adjacent control, and marks each part with data-slot.
Installation
npx shadcn@latest add @kosori/input-groupExample
input-group-example.tsx
import { IconSearch } from '@tabler/icons-react';
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
} from '@/components/ui/input-group';
const InputGroupExample = () => (
<InputGroup>
<InputGroupInput aria-label='Search' placeholder='Search' type='search' />
<InputGroupAddon>
<IconSearch aria-hidden='true' />
</InputGroupAddon>
</InputGroup>
);
export default InputGroupExample;
Usage
import { IconSearch } from '@tabler/icons-react';
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
} from '@/components/ui/input-group';
const InputGroupDemo = () => (
<InputGroup>
<InputGroupInput aria-label='Search' placeholder='Search' type='search' />
<InputGroupAddon>
<IconSearch aria-hidden='true' />
</InputGroupAddon>
</InputGroup>
);Variants
| Part | Prop | Values |
|---|---|---|
InputGroupAddon | align | block-end, block-start, inline-end, inline-start |