Input Group

An input group joins an input or a textarea with addons inside one border, so users read them as a single field. Addons hold icons, text, buttons or keyboard shortcuts and sit before, after, above or below the control. A click on an addon, outside of its buttons, moves the focus to the input.

UsageCopy Anchor Link

import {
	InputGroup,
	InputGroupAddon,
	InputGroupInput,
} from "@biem/ui/components/ui/input-group";
import { IconSearch } from "@tabler/icons-react";

export function InputGroupDefault() {
	return (
		<div className="w-full max-w-sm">
			<InputGroup>
				<InputGroupInput aria-label="Search items" placeholder="Search items"/>
				<InputGroupAddon>
					<IconSearch stroke={1.5}/>
				</InputGroupAddon>
			</InputGroup>
		</div>
	);
}

ExamplesCopy Anchor Link

Inline Start AlignmentCopy Anchor Link

Some values need context before users enter them, such as the currency of an amount. Every addon sits before the control in the same row unless set otherwise, and align with the value "inline-start" states this place explicitly, so users know what the value refers to before they type.

Inline End AlignmentCopy Anchor Link

Units usually follow the figure they belong to, as kilograms follow a weight. With align set to "inline-end", the addon moves after the control in the same row, so users enter the figure in the order in which they read it.

Block Start AlignmentCopy Anchor Link

Context that needs a full sentence, such as the basis on which a value is calculated, would crowd the row beside the control. Set to "block-start", align gives the addon a row of its own above the control, whatever its position in the markup, and users take in the context before they reach the value.

Block End AlignmentCopy Anchor Link

Hints and actions that refer to the complete entry fit best after it. Through align set to "block-end", the addon takes a row of its own below the control, where users reach it once they have finished typing.

With TextCopy Anchor Link

Many figures only gain their meaning through a unit or a currency. Inside an addon, InputGroupText keeps that unit in the field without making it part of the value, so users type the figure alone and still read it in context.

With TextareaCopy Anchor Link

Notes, instructions and messages need room for more than one line. Taking the place of the input, InputGroupTextarea gives them that room, and the group adopts its height, so addons above or below frame the longer text as one field.

With ButtonCopy Anchor Link

An action often belongs to the value it works with, such as checking a code or applying a discount. Placed in an addon, InputGroupButton keeps that action within the field, and since its type is "button" unless set otherwise, a click does not submit a form around the group.

Extra Small ButtonCopy Anchor Link

Actions inside a field should support the entry rather than outweigh it. Unless another size is set, a button in the group takes the size "xs", which fits beside the control in the same row and leaves the attention on the entry.

Small ButtonCopy Anchor Link

Once an action has a row of its own above or below the control, it can claim more presence, such as submitting a longer entry. With size set to "sm", the button is as high as a single-line field, so the action that completes the entry becomes easier to find and to hit.

With Keyboard ShortcutCopy Anchor Link

Fields that users return to all day deserve a way in without the pointer. A Kbd in an addon names the keys that lead there, so users learn the shortcut in passing. The hint only names it, and the application listens for the keys itself.

ControlledCopy Anchor Link

Sometimes the application needs the entry while users are still typing, for example to filter a list with every keystroke. Through value and onChange on InputGroupInput it holds the text itself, so other parts of the interface can fill or clear the field as well.

DisabledCopy Anchor Link

A value can be locked for a while, for example while an order awaits approval. The group follows the disabled attribute of its control, so users can no longer edit the value, and the whole field, addons included, shows that state while the value stays readable.

Disabled ButtonCopy Anchor Link

Until an entry is complete, the action that uses it may have to wait. Marked as disabled, the button accepts no interaction and exposes its state to assistive technology, while the control stays editable, so users can finish the entry that makes the action available.

InvalidCopy Anchor Link

Entries outside what a process accepts, such as a negative quantity, need a correction before users move on. Once the input carries aria-invalid, the group signals the error across the whole field, including its addons, and assistive technology reports the entry as invalid.

API ReferenceCopy Anchor Link

InputGroupCopy Anchor Link

InputGroup frames the control and its addons as one field and shows when the control is focused, disabled or invalid. It renders a div and has no props of its own.

InputGroupAddonCopy Anchor Link

InputGroupButtonCopy Anchor Link

InputGroupTextCopy Anchor Link

InputGroupText holds text inside an addon, such as a currency or a unit. It renders a span and has no props of its own.

InputGroupInputCopy Anchor Link

InputGroupInput is the control for a single line of text, and the group follows its disabled and aria-invalid attributes. It renders an input and has no props of its own.

InputGroupTextareaCopy Anchor Link

InputGroupTextarea is the control for several lines of text, and the group follows its disabled and aria-invalid attributes. It renders a textarea and has no props of its own.