Input
Text field with 3 sizes, 14 types, 4 interaction states, and the Figma properties Label, Required, Help icon, Hint text and Destructive. Every type is a library component — pick the one you need.
{ Input, Textarea, PhoneInput, CurrencyInput, PasswordInput, TagsInput, VerificationCodeInput, FileInput, NumberField } from "@pepulux/ui"States — Placeholder / Filled / Focused / Disabled
Destructive: false
Destructive: true
This field is required
This field is required
This field is required
Sizes — sm / md / lg
Type: Email
Invalid email address
Type: Phone number — country code dropdown + flag
Type: Sale amount — trailing currency selector
Enter amount in USD
Type: Website
Enter a valid URL
Type: Card number
Invalid card number
Type: Password — checkmark hint
Must be at least 8 characters.
Incorrect password
Type: Password — strength bar
Use 8+ characters with a mix of letters, numbers and symbols.
Incorrect password
Type: Date
Date is required
Type: Number
Value out of range
Type: Tags
At least one tag is required
Type: Verification code (OTP)
Invalid code. Please try again.
Type: Upload file
File is required
Label extras — Required and Help icon
This is a hint text.
This field is required
Leading / trailing addon
Custom nodes in a bordered block — use for selects, units or domains.
Type: Number counter — horizontal and vertical
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. |
| required | boolean | — | Figma Required * — brand asterisk after the label |
| helpText | string | — | Figma Help icon — tooltip beside the label |
| leadingAddon | ReactNode | — | Bordered block before the input (select, prefix) |
| trailingAddon | ReactNode | — | Bordered block after the input (select, unit) |
| trailingAction | ReactNode | — | Interactive node inside the right edge (clear, toggle) |
| disabled | boolean | false | Disabled state |