#InputGroup

Joins a field to whatever sits against it — an icon, a unit, a shortcut hint, a button — inside one bordered box that focuses as a single control. Reach for Field instead when what you need is a label and a description rather than something attached to the field itself.

Source · Storybook

#Usage

import { Info, Search } from '@wallarm-org/design-system/icons';
import { Input } from '@wallarm-org/design-system/Input';
import { InputGroup, InputGroupAddon, InputGroupText } from '@wallarm-org/design-system/InputGroup';
import { VStack } from '@wallarm-org/design-system/Stack';

#Examples

#Disabled

Disabling the control dims the whole group, addons included, so the box reads as one unavailable thing rather than a live button next to a dead field.

#With error

The error border is drawn by the group for the same reason, keeping the red outline around everything the reader thinks of as the field.

#With loader

A Loader as a trailing addon, for a field that validates or searches as you type. It replaces nothing, so the text doesn't shift when it appears.

#With kbd

A Kbd addon showing the shortcut that focuses the field — the search-box convention. Only worth it where the shortcut actually exists.

#With tooltip

An addon that explains the field, for when the reason is longer than a description line but shorter than help text.

#With textarea

The group also wraps a Textarea, with align='block-end' putting the addon under the text rather than beside it — this is the composer shape.

#With select

A Select as an addon, for a unit or scope that changes what the value means. Keep it on the side the reader reads last.

#Props

#Explorer