InputGroup

Prefix and suffix addons clipped into one glass control — URLs, currency, units, and icon chrome around a text input.

Preview

Live

https:// 
<div class="field">
  <label for="url">Website</label>
  <div class="input-group">
    <span class="input-group__addon">https://</span>
    <input id="url" name="url" type="text" placeholder="example.com" />
  </div>
</div>

Variants

Prefix + suffix

Addons on both sides of the control.

$ USD

Compact

.input-group--sm for denser toolbars.

/

Invalid

Group .is-invalid or child .is-invalid shares the danger ring.

@

Valid

Group .is-valid or child .is-valid uses the --ok ring.

@

Available.

Disabled

.is-disabled on the group, or a disabled input inside.

https://

Accessibility

  • Label the input with a visible <label> — addons are decorative chrome, not a substitute for a name.
  • Wire validation with aria-describedby pointing at .field-error / .field-success, and set aria-invalid when invalid.
  • Prefer marking invalid/valid on the input (or both input and group). When both valid and invalid are set in React, invalid wins.
  • Focus is visible via the group’s :focus-within ring — do not remove it without a replacement.

API

HTML classes

Class Description
.input-group Flex row; shared glass border and radius; clips children.
.input-group__addon Prefix or suffix (muted background).
.input-group__text Alias for addon text chrome (same styles).
.input-group--sm Compact height.
.is-invalid / .is-valid On the group or the input — danger / ok border ring.
.is-disabled Dims the group (also auto when a child input is disabled).

React props

From src/core/InputGroup.tsx — InputGroup, InputGroupAddon.

Prop Type Default Description
size 'sm' — InputGroup — compact height (.input-group--sm).
invalid boolean false InputGroup — adds .is-invalid.
valid boolean false InputGroup — adds .is-valid (ignored if invalid).
disabled boolean false InputGroup — adds .is-disabled.
…native HTML attrs — Div / span props forwarded via forwardRef.