Docs / Forms / Input group

Input group

Extend a form control by prepending or appending text, buttons, or other controls. InputGroup lays its children out as one seamless, connected unit and reconciles their borders and corner radii automatically.

Import

import { InputGroup, InputGroupText, FormControl } from '@metatoy/bootstrap-styled';

Text addons

Wrap non-control content — symbols, units, domains — in InputGroupText. Place it before the FormControl to prepend, after to append, or on both sides.

Buttons

A Button can sit directly inside the group as an addon; no InputGroupText wrapper is needed. Outline variants pair well with the group’s border treatment.

Sizing

Set size to sm or lg on the InputGroup — it sizes every control and addon in the group at once. Don’t size the individual FormControl; the group owns it.

Select & checkbox addons

FormSelect composes the same way as FormControl. To use a checkbox or radio as an addon, place the native input inside an InputGroupText.

Multiple controls & wrapping

Multiple controls and addons can share one group, and long content wraps rather than overflowing when the group is narrower than its contents.

Props

InputGroup

InputGroup also accepts all native <div> attributes. InputGroupText is a styled <span> (with the input-group-text class) and takes all native <span> attributes — it exposes no props of its own.

Theming

InputGroup and its addons read the shared control tokens: --bs-tertiary-bg for the addon fill, --bs-border-color and --bs-border-width for the seam borders, --bs-body-color for the addon text, and --bs-border-radius (-sm / -lg at the sizes) for the outer corners. Override any of these on an ancestor to reshade the whole group. For a one-off recolor, scope the variables inline:

<div style={{ '--bs-tertiary-bg': '#eef2ff', '--bs-border-color': '#c7d2fe' }}>
<InputGroup>
  <InputGroupText>@</InputGroupText>
  <FormControl aria-label="Username" />
</InputGroup>
</div>

Accessibility

Input groups don’t carry an accessible name for their controls. Because addons are visual, give each FormControl / FormSelect an aria-label (or an associated <label>) describing what to enter — the surrounding $, @, or .00 addon is not announced. Checkbox and radio addons should have their own aria-label as well.

Explore in Ladle

Open in Ladle