Input group
One field box around an input and the text, icons or buttons that belong to it. PasswordInput and SearchInput are ready-made groups for the two you build most.
At least 8 characters, with one number.
Installation
Set up Camaleo once (Installation), then import what you need. Put it in a Field to give it a label.
import { InputGroup, InputAddon, PasswordInput, SearchInput, Input } from "@camaleo/react";Anatomy
The group draws one border and one focus ring. The input inside drops its own, and addons, icons and buttons sit at either end.
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above.
At least 8 characters, with one number.
Password with live rules
Type a password. With the text visible, people catch the typo that a rule like "one number" would otherwise reject twice.
2 of 6 invoices
- INV-1042 · Acme Corp
- INV-1045 · Acme Labs
Search with clear
Type, then press the × or Esc. Clearing fires onChange and puts focus back in the input, and the count is announced with aria-live.
Press / anywhere on the page to jump here.
Keyboard shortcut
Press / outside a field. shortcut only draws the hint while the field is empty: wire the key yourself and declare it with aria-keyshortcuts.
Your shop's public address. We add https:// for you.
URL with a prefix
The fixed part sits in an InputAddon, so people type only the domain and the value you save has no "https://" to strip.
Currency and period
A currency before and a period after say what the number means, so the label can stay short.
Copy button
Click Copy. A Button inside the group shares its border, and the new label is announced, so people know it worked.
Leading icon
An icon helps people scan a long form, but it is decoration: mark it aria-hidden and let the label do the naming.
Invalid
In an invalid Field the whole group turns red, addon included, and the error says what to try instead.
In context
These are whole pieces of UI you can copy, in the skin you picked.
Shop settings
What customers see on your checkout page.
Guidelines
People type only what changes, and can't get the prefix wrong.
Half will skip "https://", the other half will type it twice.
People check what they typed by looking at it.
It doubles the typing and still can't show a typo that both fields share.
Props
PasswordInput and SearchInput take every prop of Input, plus their own:
sm for toolbars and dense tables.sm for toolbars and dense tables.aria-keyshortcuts.InputGroup takes size and the attributes of a <div>; InputAddon takes those of a <span>.
Styling hooks
Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the group itself.
Attributes
Tokens it reads
Color
Shape & size
Type & motion
This component only
/* addons without a tinted background, only in the checkout */
.checkout [data-slot="input-group"] {
--cml-input-addon-bg: transparent;
}Accessibility
- The password button's name says what a press does ("Show password" / "Hide password"), so it is not also aria-pressed. Focus stays on it, so people can toggle back.
- Clearing a search returns focus to the input, so people can type the next query right away.
- showLabel, hideLabel and clearLabel default to English. Pass translated ones.
- Addon text is read with the input unless you mark it aria-hidden. Hide decoration like "https://", keep units like "/mo" readable.