LifeDS

Component

Input Group

Group inputs and addons together, with support for icons, buttons and text.

InputGroupsize: sm · md · lg · xl
InputGroupAddonalign: inline-start · inline-end · block-start · block-end
InputGroupButton / InputGroupTextactions and static text inside the group
InputGroupInput / InputGroupTextareathe control itself
Playground
⌘K

Basic — search with result count

32 results

Inline start / end icons

inline-start (default)
inline-end — password visibility toggle

Block start / end — header and footer content

Message
Line 1, Column 1

Icons

Text — currency, URL, email, character count

$
USD
https://
@wellzesta.app
0/140

Buttons — copy, favorite, popover info, search

Keyboard shortcut

⌘K

Dropdown menu inside addon

Loading state

Sizes

RTL support

32 نتيجة

Tokens used

6 semantic tokens consumed by this component.

--inputInput
bg-inputborder-input
--ringRing
ring-ringring
--destructiveDestructive
bg-destructivetext-destructiveborder-destructivering-destructive
--mutedMuted
bg-mutedtext-mutedborder-muted
--muted-foregroundMuted Foreground
text-muted-foreground
--foregroundForeground
text-foreground