Blode UI
GitHub

Input Group

PreviousNext

Combine inputs with addons, actions, and inline metadata.

Loading
Loading...
import { Search } from "blode-icons-react";
import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";
 
export function InputGroupDemo() {
  return (
    <InputGroup className="max-w-xs">
      <InputGroupInput placeholder="Search..." />
      <InputGroupAddon>
        <Search />
      </InputGroupAddon>
      <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
    </InputGroup>
  );
}

Installation

npx shadcn@latest add "https://ui.blode.co/r/styles/default/input-group"

Usage

import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";
<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
</InputGroup>