Search for a command to run...
Group input elements with addons, icons, and text for enhanced form controls.
import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "@/components/optics/input-group";import { Search } from "lucide-react";<div className="w-full max-w-sm"> <InputGroup variant="raised"> <InputGroupInput placeholder="Search..." /> <InputGroupAddon> <Search className="size-4" /> </InputGroupAddon> <InputGroupAddon align="inline-end"> <InputGroupText> 12 results </InputGroupText> </InputGroupAddon> </InputGroup></div>import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "@/components/optics/input-group";import { Search } from "lucide-react";<div className="w-full max-w-sm"> <InputGroup variant="raised"> <InputGroupInput placeholder="Search..." /> <InputGroupAddon> <Search className="size-4" /> </InputGroupAddon> <InputGroupAddon align="inline-end"> <InputGroupText> 12 results </InputGroupText> </InputGroupAddon> </InputGroup></div>Name | Type | |
|---|---|---|
variant | any |
Name | Type | |
|---|---|---|
align | string(default: inline-start) |
Name | Type | |
|---|---|---|
variant | string(default: ghost) |