InputGroup

A container component to group inputs with icons, buttons, or text addons.

Usage

The InputGroup component is used to add prefixes or suffixes to input fields, often used for search bars, units, or action buttons.

import { InputGroup, Icon } from "@elemnts-ui/react"

<InputGroup.Root>
  <InputGroup.Addon>
    <Icon icon="tabler:search" />
  </InputGroup.Addon>
  <InputGroup.Input placeholder="Search..." />
</InputGroup.Root>

Variants

Use the variant prop to change the visual style of the input group.

Sizes

Use the size prop to change the size of the input group.

API Reference

InputGroupRoot

The root component for the input group.

Prop	Type	Default
asChild	`boolean`	`false`
variant	`'primary' \| 'secondary' \| 'tertiary'`	`primary`
size	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`default`
disabled	`boolean`	`false`
invalid	`boolean`	`false`

InputGroupAddon

The addon component for the input group.

Prop	Type	Default
asChild	`boolean`	`false`

InputGroupInput

The input component for the input group.

Prop	Type	Default
asChild	`boolean`	`false`

InputGroupTextarea

The textarea component for the input group.

Prop	Type	Default
asChild	`boolean`	`false`