Input group: Sizes

size on the group sets the height and passes down to the input, matching <Input /> sizes. Buttons keep concentric corners at every size.

import { IconSearch } from "@tabler/icons-react"

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

export function InputGroupSizes() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      {(["sm", "default", "lg"] as const).map((size) => (
        <InputGroup key={size} size={size}>
          <InputGroupInput
            placeholder={`Size ${size}`}
            aria-label={`Size ${size}`}
          />
          <InputGroupAddon>
            <IconSearch />
          </InputGroupAddon>
          <InputGroupAddon align="inline-end">
            <InputGroupButton>Go</InputGroupButton>
          </InputGroupAddon>
        </InputGroup>
      ))}
    </div>
  )
}

Add this example

This adds the example as components/examples/input-group/sizes.tsx, together with the Input group component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/input-group-sizes.json

To add only the component, follow the Input group installation.

Props in this example

The Input group props this example sets, from the API reference.

InputGroup

Prop	Type	Default
`size`Height of the group, passed down to the input.	`"sm" \| "default" \| "lg"`	`"default"`

InputGroupAddon

Prop	Type	Default
`align`	`"inline-start" \| "inline-end" \| "block-start" \| "block-end"`	`"inline-start"`

Every prop is in the Input group API reference.

More Input group examples

See them all, with keyboard support and accessibility notes, on the Input group page.