Input Group

Combine one input with a prefix, suffix, or adjacent action.

View source Explore Storybook

Interactive preview

Live specimenTry the component

Search records

Website

https://.com

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add input-group

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<Field label="Website">
  <InputGroup>
    <InputGroupAddon id="website-prefix">https://</InputGroupAddon>
    <Input name="website" aria-describedby="website-prefix" />
    <InputGroupAddon align="end">.com</InputGroupAddon>
  </InputGroup>
</Field>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`size`	`sm \| md \| lg`	`md`
`invalid`	`boolean`	`false`
`InputGroupAddon.align`	`start \| end`	`start`

Accessibility

The input still needs a label. Associate meaningful addon text using aria-describedby; mark purely decorative icons aria-hidden. Adjacent Button children retain separate names and focus. Use one Input directly inside the group. Logical start/end placement supports RTL.