Input Group

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

Default

Use InputGroup.Text to display text or icons inside an InputGroup.

@

tsx

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

export default function InputGroupDefault() {
  return (
    <InputGroup>
      <InputGroup.Text>@</InputGroup.Text>
      <Input placeholder="Username" />
    </InputGroup>
  );
}

Sizes

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

@
@
@

tsx

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

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

With button

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

tsx

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

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

Multiple addons

Input groups support multiple addons.

$.00

tsx

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

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

API Reference

InputGroup

PropTypeDefault
size"sm" | "md" | "lg""md"
classNamestring—

InputGroup.Text is an addon wrapper. It accepts 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