Input Group

since 1.2

InputGroup is a composite input component that combines text inputs with accompanying elements like buttons, icons, or text.

Example

Variant

Size

"use client"

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@strongtie/design-system/input-group"
import { Search } from "lucide-react"

export function InputGroupDefault() {
  return (
    <InputGroup>
      <InputGroupAddon align="inline-start">
        <Search />
      </InputGroupAddon>
      <InputGroupInput placeholder="Search..." />
    </InputGroup>
  )
}

Install

import { InputGroup } from "@strongtie/design-system/input-group"

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

Components

This module exports the following components:

InputGroup
InputGroupAddon
InputGroupButton
InputGroupText
InputGroupInput
InputGroupTextarea

Props

`<InputGroupAddon>`

Prop	Type	Default	Description
`align`	`"inline-start" \| "inline-end" \| "block-start" \| "block-end" \| null`	`inline-start`

`<InputGroupButton>`

Prop	Type	Default	Description
`size`	`"sm" \| "icon-sm" \| "xs" \| "icon-xs" \| null`	`xs`
`variant`	`"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null`	`ghost`

Variants

align

inline-startinline-endblock-startblock-end

size

smicon-smxsicon-xs

variant

linkdefaultdestructiveoutlinesecondaryghost

Hover Card Input Otp