LifeDS

Component

Input

Three input primitives: Input (base), InputGroup (with addons), and InputOTP (one-time password).

Inputtype · placeholder · disabled · aria-invalid
InputGroupwraps Input with inline-start · inline-end · block-start · block-end addons
InputGroupAddonalign: inline-start · inline-end · block-start · block-end
InputGroupButtonsize: xs · sm · icon-xs · icon-sm
InputOTPmaxLength · pattern · disabled
Playground

Input — base

default
with value
disabled
aria-invalid — validation error

Input — types

Input — with Label

We'll never share your email.

Enter a valid email address.

Username cannot be changed.

InputGroup — inline addons

inline-start — icon prefix
inline-start — text prefix
https://
inline-end — button suffix
both sides

InputGroup — block addons (floating label)

Full name
Email address
Message
Notes

States — disabled & invalid

InputGroup disabled
InputGroup aria-invalid

InputOTP — one-time password

4 digits
6 digits
disabled
with label and hint

Enter the 6-digit code sent to your email.

Tokens used

7 semantic tokens consumed by this component.

--backgroundBackground
bg-background
--foregroundForeground
text-foreground
--muted-foregroundMuted Foreground
text-muted-foreground
--borderBorder
border-borderborder
--inputInput
bg-inputborder-input
--ringRing
ring-ringring
--destructiveDestructive
bg-destructivetext-destructiveborder-destructivering-destructive