Input Group

Input Group component dùng để kết hợp nhiều input hoặc button thành một nhóm thống nhất.

1. Import

Import trực tiếp từ source path của component.

import { InputGroup, InputGroupItem } from "@/design-system/components/ui/input-group"

2. Props

Props quan trọng nên phản ánh đúng khả năng chính của component hiện tại.

Component	Prop	Type	Default
InputGroup	className	string	--
InputGroupInput	className	string	--
InputGroupButton	children	ReactNode	--
InputGroupText	children	ReactNode	--

3. Usages

Mỗi cách dùng quan trọng nên có tab riêng, để preview và code bám đúng use case thay vì dùng một snippet chung.

import { InputGroup, InputGroupInput, InputGroupAddon } from "@/components/ui/input-group";
import { Search } from "lucide-react";

export function InputGroupDemo() {
  return (
    <InputGroup className="max-w-xs">
      <InputGroupInput placeholder="Search..." />
      <InputGroupAddon>
        <Search />
      </InputGroupAddon>
      <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
    </InputGroup>
  );
}