Input Group

Joins controls, addons, and buttons into a single combined control.

Default

Use InputGroupText to display text or icons inside an InputGroup.

@

tsx

import { InputGroup, InputGroupText, FormControl } from "@hummingbirdui/react";

export default function InputGroupDefault() {
  return (
    <InputGroup>
      <InputGroupText>@</InputGroupText>
      <FormControl placeholder="Username" />
    </InputGroup>
  );
}

Sizes

The size prop offers three sizes: sm, md (default), and lg.

@
@
@

tsx

import { InputGroup, InputGroupText, FormControl } from "@hummingbirdui/react";

export default function InputGroupSizes() {
  return (
    <div className="space-y-4 max-w-sm mx-auto">
      <InputGroup size="sm">
        <InputGroupText>@</InputGroupText>
        <FormControl placeholder="Small" />
      </InputGroup>
      <InputGroup size="md">
        <InputGroupText>@</InputGroupText>
        <FormControl placeholder="Medium" />
      </InputGroup>
      <InputGroup size="lg">
        <InputGroupText>@</InputGroupText>
        <FormControl placeholder="Large" />
      </InputGroup>
    </div>
  );
}

With button

A Button can be placed alongside the form control as a trailing action.

tsx

import { InputGroup, FormControl, Button } from "@hummingbirdui/react";

export default function InputGroupButton() {
  return (
    <InputGroup>
      <FormControl placeholder="Search" />
      <Button>Search</Button>
    </InputGroup>
  );
}

Multiple addons

Input groups support multiple addons.

$.00

tsx

import { InputGroup, InputGroupText, FormControl } from "@hummingbirdui/react";

export default function InputGroupMultiple() {
  return (
    <InputGroup>
      <InputGroupText>$</InputGroupText>
      <FormControl type="number" placeholder="0" />
      <InputGroupText>.00</InputGroupText>
    </InputGroup>
  );
}

API Reference

InputGroup

PropTypeDefaultDescription
size"sm" | "md" | "lg""md"Size applied to the grouped controls.
asChildbooleanfalseRender as a child element instead of the default.
classNamestring—Additional classes merged with the generated classes.

InputGroupText is an addon wrapper. It accepts asChild and className.

Styling

Hummingbird React input group is styled entirely through Hummingbird's utility classes and CSS variables.

  • See the full list of available input group classes in the Class overview.
  • Visit the CSS Variables documentation to explore all available variables.
PreviousSwitchNextFloating Label