Skip to Content
ComponentsInput Group

Input Group

A composable component for combining inputs with icons, buttons, and text addons. Supports prefix and suffix addons for inputs, and block addons for textareas.

import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group"

Examples

Icon prefix

<InputGroup>
  <InputGroupAddon align="inline-start">
    <MagnifyingGlass />
  </InputGroupAddon>
  <InputGroupInput placeholder="Search..." />
</InputGroup>

Icon suffix

<InputGroup>
  <InputGroupInput placeholder="Enter email..." />
  <InputGroupAddon align="inline-end">
    <At />
  </InputGroupAddon>
</InputGroup>

Button suffix

import { useState } from "react"
import { Eye, EyeSlash } from "@phosphor-icons/react"
 
function PasswordInput() {
  const [showPassword, setShowPassword] = useState(false)
 
  return (
    <InputGroup>
      <InputGroupInput
        type={showPassword ? "text" : "password"}
        placeholder="Password"
      />
      <InputGroupAddon align="inline-end">
        <InputGroupButton onClick={() => setShowPassword((v) => !v)}>
          {showPassword ? <EyeSlash /> : <Eye />}
        </InputGroupButton>
      </InputGroupAddon>
    </InputGroup>
  )
}

Textarea with send button

<InputGroup>
  <InputGroupTextarea placeholder="Write a message..." rows={3} />
  <InputGroupAddon align="block-end">
    <InputGroupButton><PaperPlaneTilt /></InputGroupButton>
  </InputGroupAddon>
</InputGroup>
Last updated on
InputInput OTP