Input
Text field with 3 sizes, 14 types, 4 interaction states, and a Destructive boolean — matching Figma V8.0 Input Fields spec.
import
{ Input, Textarea } from "@pepulux/ui"States — Placeholder / Filled / Focused / Disabled
Destructive: false
PlaceholderFilledFocusedDisabled
Destructive: true
This field is required
This field is required
This field is required
PlaceholderFilledFocusedDisabled
Sizes — sm / md / lg
Type: Email
Invalid email address
Type: Phone number — country code dropdown + flag
Include country code
Invalid phone number
Type: Sale amount — trailing currency selector
Enter amount in USD
Amount cannot be zero
Type: Website
https://
https://
Enter a valid URL
Type: Card number
Invalid card number
Type: Password — Pepulux V8.0 (checkmark hint)
Must be at least 8 characters.
Incorrect password
Type: Password — Omkaarya (Layout=Boxed, strength bar)
This is a hint text to help user.
Incorrect password
Type: Date
Date is required
Type: Number
Value out of range
Type: Tags
DesignMarketing
DesignMarketing
At least one tag is required
Type: Verification code (OTP)
Enter the 6-digit code sent to your email
Invalid code. Please try again.
Type: Upload file
File is required
Textarea
Max 280 characters
Description is required
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | Height — 36 / 40 / 44px |
| type | string | "text" | HTML type — email | tel | password | number | date | url | search | text |
| destructive | boolean | false | Figma Destructive prop — red border and error state |
| error | boolean | — | Alias for destructive |
| errorText | string | — | Error message (also activates destructive) |
| label | string | — | Field label above the input |
| placeholder | string | — | Placeholder text |
| hint | string | — | Helper text below (normal state only) |
| leadingIcon | ReactNode | — | Icon inside left edge |
| trailingIcon | ReactNode | — | Icon/button inside right edge — can be interactive |
| leadingText | string | — | Prefix block — "https://", etc. |
| disabled | boolean | false | Disabled state |