Input Group
An input with optional leading/trailing addons, icons, buttons, validation state, pill shape, keyboard shortcuts, and shared-border card inputs.
Molecule
Input · Field · Button · Kbd
When To Use
- Use buttons for explicit user-triggered actions such as submit, save, continue, or open.
- Choose the variant and size that matches the action hierarchy in the surrounding view.
- Prefer this page when you need to compare action density, icon usage, and loading or disabled states side by side.
When Not To Use
- Do not use a button when plain text, static status, or passive decoration would communicate the state just as well.
- Do not overload a single view with too many equally prominent buttons; reduce or demote secondary actions first.
Accessibility Notes
- Keep a visible label or an equivalent accessible name attached to the control.
- Surface validation and helper text programmatically so assistive technologies receive the same context as sighted users.
- Preserve the native focus order and keyboard interactions instead of replacing them with custom behavior.
Key Props / API
Props
leadingAddon, trailingAddon, leadingIcon, trailingIcon, trailingButton, error
Example Code
<InputGroup leadingAddon="https://" placeholder="yoursite.com" />Input Group · Text addons
Leading addon
Text prefix attached to input left
Trailing addon
Text suffix attached to input right
Currency / amount
$ prefix + currency dropdown-style addon
Input Group · Icons
Leading icon
Icon positioned inside the input on the left
Trailing icon
Icon positioned inside the input on the right
Input Group · Validation error
Error state
Red border + error icon + message via Field
This email is already registered.
Please enter a valid URL.
Input Group · Pill shape
Rounded-full variant
Use pill for search bars and chat-style inputs
Input Group · Corner hint
Optional / character count
cornerHint prop on Field renders text in the label row top-right
Input Group · Keyboard shortcut
Shortcut badge in trailing area
⌘K displayed inside the input
Input Group · With trailing button
Input Group · Shared borders
Card payment fields
Number, expiry, and CVC sharing borders