InputGroup

When to use

Use InputGroup when a text control needs an addon that completes its meaning: an address prefix and suffix, a unit, a search icon, a clear or copy action, a toolbar row under a text area.

When not to use

• When one icon or unit is enough: TextInput gives this with startContent and endContent.
• For several actions: Put at most one small action in an addon; for more, use buttons outside the field.
• For a choice: Do not put a dropdown in an addon; use a separate selection control.

Anatomy

Field label

https://

.com

Help text goes here.

LightDark

Copy code

import { InputGroup } from '@bigbang/ui';

export default function Default() {
  return (
    <div className="max-w-96">
      <InputGroup label="Field label" description="Help text goes here.">
        <InputGroup.Addon>
          <InputGroup.Text>https://</InputGroup.Text>
        </InputGroup.Addon>
        <InputGroup.Input />
        <InputGroup.Addon align="inline-end">
          <InputGroup.Text>.com</InputGroup.Text>
        </InputGroup.Addon>
      </InputGroup>
    </div>
  );
}

1. Label: the Field label, with the necessity marker when needed.
2. Box: one border around the control and addons; focus and error apply to the box.
3. Start addon: align="inline-start"; text or a decorative icon.
4. Control: InputGroup.Input or InputGroup.Textarea.
5. End addon: align="inline-end"; text, a unit or one InputGroup.Button.
6. Block addon: block-start or block-end; a full-width row.

Behaviour

• Clicking an addon’s surface moves focus to the control; buttons and links in the addon do their own job.
• align places addons whatever their DOM order; screen readers read the DOM order.
• Start and end addons use logical sides; in right-to-left text they swap.
• disabled turns off the control and the label and fades the addon text; disable a button in an addon yourself.

Guidelines

• Keep addon text short: “https://”, “.com”, “items”.
• For an action in an addon, use InputGroup.Button; give an icon-only one a label.
• Write addons in reading order in the DOM: start addon, control, end addon.
• Addon text does not replace the label; give every group a label.

Content

• Prefixes and suffixes are not part of the value; do not ask the user to type them.
• Write unit text in lower case and in full.

Turkish	English
Temizle	Clear
Kopyala	Copy
adet	items

Related components

• TextInput: a text input with simple start and end content.
• Textarea: multi-line text without addons.
• IconButton: icon actions outside a field; inside an addon use InputGroup.Button.
• Field: binds label, help text and error.