ContextQMD
Back to Shark UI

Input Group

docs/components/input-group

latest9.1 KB
Original Source

Sections

Components

Utilities

Forms

Hooks

Input Group

Copy Markdown

Group input elements together.

PreviewCode

Installation#

CLIManual

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#

PreviewCode

Filter

Icon positioned at the start.

inline-end#

PreviewCode

Password

Icon positioned at the end.

block-start#

PreviewCode

Textarea

script.jsCopy

Header positioned above the textarea.

block-end#

PreviewCode

Textarea

0/280Post

Footer positioned below the textarea.

Size#

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

Small#

PreviewCode

Medium#

PreviewCode

Large#

PreviewCode

States#

Disabled#

PreviewCode

Invalid#

PreviewCode

https://

Examples#

With Tooltip#

PreviewCode

With Button#

PreviewCode

Subscribe

With Menu#

PreviewCode

With Badge#

PreviewCode

Available

With Keyboard Shortcut#

PreviewCode

⌘K

With Inner Label#

PreviewCode

Username

With Spinner#

PreviewCode

With Number Field#

PreviewCode

€

EUR

With Input Group#

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

PreviewCode

script.js

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.

PreviewCode

Enter Your Password

Show PasswordClear Password

Weak Password

API Reference#

InputGroup#

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

PropTypeDefault
size`"sm""md"
classNamestring-

InputGroupAddon#

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

PropTypeDefault
align`"inline-start""inline-end"
classNamestring-

InputGroupButton#

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

PropTypeDefault
sizeButtonSize"xs"
variantButtonVariant"ghost"
type`"button""submit"
classNamestring-

InputGroupText#

Static text label inside an addon.

PropTypeDefault
classNamestring-

InputGroupInput#

Text input. Accepts all native input props.

PropTypeDefault
classNamestring-

InputGroupTextarea#

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

PropTypeDefault
classNamestring-

[

Previous page

Image Cropper ](/docs/components/image-cropper)[

Next page

Input OTP ](/docs/components/input-otp)

On This Page

InstallationAnatomyUsageAligninline-startinline-endblock-startblock-endSizeSmallMediumLargeStatesDisabledInvalidExamplesWith TooltipWith ButtonWith MenuWith BadgeWith Keyboard ShortcutWith Inner LabelWith SpinnerWith Number FieldWith Input GroupPassword Strength CheckerAPI ReferenceInputGroupInputGroupAddonInputGroupButtonInputGroupTextInputGroupInputInputGroupTextarea