Input Group

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

Input groups enhance standard text inputs by attaching supplementary elements to the start or end of the input field. These additions can include action buttons, descriptive text, icons, or labels that provide context or functionality related to the input.

Common use cases include search inputs with search buttons, URL inputs with protocol prefixes, price inputs with currency symbols, or any input that benefits from contextual actions or information. The component handles focus states, validation styling, and maintains proper accessibility throughout.

Example

"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>
  )
}

Installation


npm install @strongtie/design-system

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

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`

Example

"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>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

input-group

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Icon Input

On This Page

Example Installation Components Props <InputGroupAddon><InputGroupButton>Example Styling Classes Accessibility

Contribute

Input Group

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

Example

"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>
  )
}

Installation


npm install @strongtie/design-system

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

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`

Example

"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>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

input-group

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Icon Input

On This Page

Example Installation Components Props <InputGroupAddon><InputGroupButton>Example Styling Classes Accessibility

Contribute