Input Group

Installation#

pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/input-group

Anatomy#

InputGroup
├── InputGroupAddon
├── InputGroupButton
├── InputGroupText
├── InputGroupInput
└── InputGroupTextarea

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#

States#

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.

InputGroupInput#

Text input. Accepts all native input props.

InputGroupTextarea#

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