Input Group

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add https://shark.vini.one/r/input-group.json

Usage

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

<InputGroup>
  <InputGroupInput />
  <InputGroupAddon>
    <InputGroupText>https://</InputGroupText>
  </InputGroupAddon>
</InputGroup>

Align

Use the align prop to change the alignment of the input group.

inline-start

inline-end

block-start

block-end

Size

Use the size prop to change the size of the input group.

Small

Medium

Large

State

Disabled

Invalid

Examples

With Tooltip

With Button

With Menu

With Badge

With Keyboard Shortcut

With Inner Label

With Spinner

With Number Field

With Input Group

Use <FieldGroup /> with textarea to build forms. Combine subject input, message textarea, and action buttons.

Password Strength Checker

A complete password checker with show/hide toggle, clear button, and real-time strength indicator. A strong password requires at least 8 characters with uppercase, lowercase, number, and special character.

API Reference

InputGroup

Wraps input with optional addons (labels, buttons, icons) on any side.

InputGroupAddon

Holds addon content (labels, buttons, icons) beside the input.

InputGroupButton

Button inside an addon. Typically used for reveal/hide, clear, or search.

InputGroupText

Static text label inside an addon (e.g. currency symbol, unit).

InputGroupInput

Text input. Accepts all native input props.

InputGroupTextarea

Multi-line text input. Accepts all native textarea props.