Search for a command to run...
Compose an input with leading/trailing addons (text, icons, buttons). Use for currency fields, URL prefixes, unit suffixes, etc.
The unstyled variant strips the border, shadow, and focus ring so the field
reads as part of the surface behind it. It exists for one case: the search
field in a list-page header (knowledge, audience, broadcasts), where the field
sits flush in the header bar instead of as a bordered control. Don't reach for it
anywhere else — a standalone input needs its chrome to be discoverable.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "unstyled" | "default" | default paints the bordered pill with focus ring. unstyled is chromeless — list-page header search only. |
Compose with InputGroupAddon (leading/trailing text, icons, buttons),
InputGroupInput, InputGroupTextarea, and InputGroupButton. InputGroupAddon
takes an align of inline-start (default), inline-end, block-start, or
block-end.
Reserve variant="unstyled" for the search field in a list-page header (knowledge, audience,
broadcasts), where it blends into the header bar.
Use variant="unstyled" for a standalone input or form field — without chrome it's hard to
find, and there's no focus feedback.
Re-create the chromeless look with className overrides; use variant="unstyled" instead.