@manhphi1309/input-group

A set of components for building complex input layouts with addons, buttons, and text inline.

Subcomponents

This package provides the following components:

• InputGroup
• InputGroupAddon
• InputGroupButton
• InputGroupText
• InputGroupInput
• InputGroupTextarea

Dependencies

This package relies on:

• @manhphi1309/button
• @manhphi1309/field
• @manhphi1309/input
• @manhphi1309/textarea
• @manhphi1309/utils
• class-variance-authority
• clsx
• lucide-react
• tailwind-merge

Installation

npm install @manhphi1309/input-group

Usage Example

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@manhphi1309/input-group"

export default function Example() {
  return (
    <InputGroup>
      <InputGroupAddon align="inline-start">
        <InputGroupText>https://</InputGroupText>
      </InputGroupAddon>
      <InputGroupInput placeholder="example.com" />
    </InputGroup>
  )
}