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 const InputGroupDemo = () => (
  <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>