Input Group

Preview

'use client';

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from '@/registry/san-francisco/ui/input-group';
import { SearchIcon } from 'lucide-react';

export default function InputGroupDemo() {
  return (
    <InputGroup className="w-full max-w-xs">
      <InputGroupAddon align="inline-start">
        <SearchIcon className="size-4" />
      </InputGroupAddon>
      <InputGroupInput placeholder="Search..." />
    </InputGroup>
  );
}

Installation

bun

bunx shadcn@latest add @sft-ui/input-group

With Addon Positions

Addons can be placed at inline-start, inline-end, block-start, or block-end.

.00

'use client';

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from '@/registry/san-francisco/ui/input-group';
import { SearchIcon } from 'lucide-react';

export default function InputGroupDemoAddonPositions() {
  return (
    <InputGroup className="w-full max-w-xs">
      <InputGroupAddon align="inline-start">
        <InputGroupText>$</InputGroupText>
      </InputGroupAddon>
      <InputGroupInput placeholder="Amount" />
      <InputGroupAddon align="inline-end">
        <InputGroupText>.00</InputGroupText>
      </InputGroupAddon>
    </InputGroup>
  );
}

With Button

'use client';

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from '@/registry/san-francisco/ui/input-group';
import { SearchIcon } from 'lucide-react';

export default function InputGroupDemoButton() {
  return (
    <InputGroup className="w-full max-w-xs">
      <InputGroupInput placeholder="Enter email..." />
      <InputGroupAddon align="inline-end">
        <InputGroupButton>Subscribe</InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
  );
}

With Textarea

'use client';

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from '@/registry/san-francisco/ui/input-group';
import { SearchIcon } from 'lucide-react';

export default function InputGroupDemoTextarea() {
  return (
    <InputGroup className="w-full max-w-xs">
      <InputGroupTextarea placeholder="Write a message..." />
    </InputGroup>
  );
}

API Reference

InputGroup

The root container that wraps inputs with addons.

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes to apply.

All standard HTML div attributes are supported via React.ComponentProps<"div">.

InputGroupAddon

Positions supplementary content around the input.

Prop	Type	Default	Description
`align`	`"inline-start" \| "inline-end" \| "block-start" \| "block-end"`	`"inline-start"`	Position of the addon relative to the input.
`className`	`string`	—	Additional CSS classes to apply.

InputGroupButton

A button rendered inside the input group.

Prop	Type	Default	Description
`size`	`"xs" \| "sm" \| "icon-xs" \| "icon-sm"`	`"xs"`	The size of the button.
`variant`	`Button` variant	`"ghost"`	The visual style of the button.
`type`	`"button" \| "submit" \| "reset"`	`"button"`	The button type attribute.

All Button props are also supported.

InputGroupText

Renders inline text or icons inside an addon.

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes to apply.

All standard HTML span attributes are supported.

InputGroupInput

An Input styled for use inside the group. All standard HTML input attributes are supported.

InputGroupTextarea

A Textarea styled for use inside the group. All standard HTML textarea attributes are supported.