Input Group

function InputGroupDemo() {
  const [query, setQuery] = React.useState("")

  return (
    <InputGroup className="max-w-xs">
      <InputGroupInput
        type="search"
        value={query}
        onChange={(event) => setQuery(event.target.value)}
        placeholder="Search alerts"
        aria-label="Search alerts"
      />
      <InputGroupAddon>
        <SearchIcon />
      </InputGroupAddon>
      <InputGroupAddon align="inline-end">
        {query ? (
          <InputGroupButton
            size="icon-xs"
            aria-label="Clear search"
            onClick={() => setQuery("")}
          >
            <XIcon />
          </InputGroupButton>
        ) : (
          <Kbd>/</Kbd>
        )}
      </InputGroupAddon>
    </InputGroup>
  )
}

Usage

import { SearchIcon } from "lucide-react"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@zenoxai/ui/components/input-group"

<InputGroup>
  <InputGroupInput placeholder="Search alerts" aria-label="Search alerts" />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

InputGroup draws one border around a control and its addons, and moves the focus ring and the invalid ring from the control to the group. Use InputGroupInput or InputGroupTextarea inside it, not the plain Input or Textarea, which would draw a second border.

Put the control first and the addons after it. align on InputGroupAddon places the addon, whatever its order in the markup:

A click on an addon outside its buttons focuses the input. Keep addons short: an icon, a unit, a prefix, a keyboard hint or one or two buttons. For a label and help text, use a Field around the group.

The example at the top of the page is the search field of a list: a search icon at the start, and at the end the / shortcut hint, replaced by a “Clear search” button once there is text. Browsers’ own clear buttons on type="search" are hidden by the base styles, so this button is the only one.

Examples

Sizes

size sets the height of a one-line group: sm (28px), default (32px) and lg (36px), the heights of Input and Button. Icons in an addon are 16px, 14px in an sm group.

<div className="flex w-full max-w-xs flex-col gap-3">
  <InputGroup size="sm">
    <InputGroupInput
      placeholder="Filter assets"
      aria-label="Filter assets"
    />
    <InputGroupAddon>
      <SearchIcon />
    </InputGroupAddon>
  </InputGroup>
  <InputGroup>
    <InputGroupInput
      placeholder="Search alerts"
      aria-label="Search alerts"
    />
    <InputGroupAddon>
      <SearchIcon />
    </InputGroupAddon>
  </InputGroup>
  <InputGroup size="lg">
    <InputGroupInput
      placeholder="Search domains"
      aria-label="Search domains"
    />
    <InputGroupAddon>
      <SearchIcon />
    </InputGroupAddon>
  </InputGroup>
</div>

Prefix and suffix text

InputGroupText shows fixed text, such as a protocol, a domain or a unit, that is part of the value’s format but not typed by the user.

<InputGroup className="max-w-sm">
  <InputGroupInput placeholder="acme" aria-label="Workspace subdomain" />
  <InputGroupAddon>
    <InputGroupText>https://</InputGroupText>
  </InputGroupAddon>
  <InputGroupAddon align="inline-end">
    <InputGroupText>.zenox.io</InputGroupText>
  </InputGroupAddon>
</InputGroup>

With a button

InputGroupButton is a Button sized for the group: xs (24px, the default) and sm (28px) for buttons with text, icon-xs and icon-sm for icon-only buttons. Each size has the text, icon and radius of the Button size of the same name. The 28px sizes fit the default and lg groups; in an sm group use the xs sizes. It defaults to variant="ghost" and type="button", so it does not submit the form.

<InputGroup className="max-w-sm">
  <InputGroupInput
    readOnly
    defaultValue="https://hooks.zenox.io/t/acme/alerts"
    aria-label="Alert webhook URL"
  />
  <InputGroupAddon align="inline-end">
    <InputGroupButton size="icon-xs" aria-label="Copy webhook URL">
      <CopyIcon />
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>

With a textarea

A block-end addon under an InputGroupTextarea holds a hint and the submit button of a comment or note box.

<InputGroup className="max-w-md">
  <InputGroupTextarea
    placeholder="Add a note for the next analyst"
    aria-label="Investigation note"
    rows={3}
  />
  <InputGroupAddon align="block-end">
    <InputGroupText>Visible to everyone in the tenant</InputGroupText>
    <InputGroupButton variant="default" size="xs" className="ml-auto">
      <SendIcon data-icon="inline-start" />
      Add note
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>

Accessibility

• The control needs its own name: aria-label, or a FieldLabel pointing at its id. Text in an addon, such as https://, is not part of that name; repeat it in the label when it matters.
• Icon-only InputGroupButtons need an aria-label. Lucide icons render with aria-hidden="true", so an icon addon adds nothing to what screen readers announce.
• The addon’s click-to-focus is for pointer users only; keyboard users tab to the input directly.
• To mark the group invalid, set aria-invalid on the control. The group draws the error ring.

API reference

Generated from the TypeScript source. className, style and children are accepted everywhere and omitted below.