elorm/ui

Input Group

Group inputs with addons for search bars and compound fields.

Saved preference for elorm init --ui-library base-ui
PreviewCode
"use client"

import { Button } from "@/components/ui/button"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"
import { SearchIcon } from "lucide-react"

export function InputGroupDemo() {
  return (
    <InputGroup className="max-w-sm">
      <InputGroupAddon>
        <SearchIcon className="size-4" />
      </InputGroupAddon>
      <InputGroupInput placeholder="Search..." />
      <InputGroupAddon align="inline-end">
        <Button variant="ghost" size="xs">
          Go
        </Button>
      </InputGroupAddon>
    </InputGroup>
  )
}

Installation#

Usage#

import { InputGroup } from "@/components/ui/input-group"

Group inputs with addons for search bars and compound fields.

FieldCheckbox