Input Group

Usage

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "@kanzo-tech/ui";

The border, the focus ring and the invalid state live on the group, not on the input — that is why an icon or a button sitting next to the field reads as part of it rather than as a neighbour. InputGroupInput and InputGroupTextarea are the same Input / Textarea with their own chrome stripped off.

This is the base the Combobox, PasswordInput and DatePicker controls are all built on, and it is where an everyday field with an icon or a unit comes from: an InputGroupAddon on the edge you want. There is no separate TextField — an input with an adornment is this, and an input without one is plain Input.

Anatomy

InputGroup
├── InputGroupAddon
│   ├── InputGroupText
│   └── InputGroupButton
├── InputGroupInput
└── InputGroupTextarea

Addons

align places an addon on either inline edge, or on a block edge — the block variants turn the group into a column, which is how a send button sits under a textarea.

With button

Sizes

Textarea

API Reference

InputGroup

InputGroupAddon

Clicking an addon focuses the input, unless the click landed on a button inside it.

InputGroupButton

InputGroupProps is exported, so a wrapper can take the same props without restating them.