Form inputs

Components

Input

Single-line text entry. Each input requires a visible label above the field.

• Supports text, email, tel, password, number, search, and url types
• Error messages appear below the input with aria-describedby
• Size inputs to match expected content length

Select

Pick one option from a dropdown.

• Default empty option prompts selection ("Select a reason")
• If more than 15 options, use Search select instead

Checkboxes

Pick one or more from a visible set.

• Group related checkboxes with a <fieldset> and legend
• Supports indeterminate state for "select all" patterns

Date input

Date entry using three separate fields for day, month, and year.

• Hint text shows expected format (e.g., "15 03 2026")
• Validates each field independently
• Preferred over date picker for birth dates and ID documents

Switch

Binary toggle for settings that take effect immediately.

• Use switch for instant changes; use checkbox for form submissions

Sizes

Toggle

Pressable button that switches between on and off states. Used for formatting options or view toggles. Supports icon-only or icon+text.

Textarea

Multi-line text entry for notes, messages, and descriptions.

• Vertical resize by default
• Character count indicator for max-length fields

Radio group

Pick exactly one from a visible set.

• Vertical layout by default; horizontal for 2-3 short options
• Pre-select a default when a common choice exists

Radio card

Single-select where each option carries more visual weight than a standard radio button. Built on RadioGroup keyboard semantics.

Variants

Radio card variants

Expanded cards include a separator, key-value detail rows, and an optional badge (Cheapest, Fastest, Recommended).

States

Rules

• Maximum 6 options per group
• Don't mix compact and expanded in the same group
• No interactive elements inside a card
• Pre-select only when paired with a badge explaining why

Search select

Searchable dropdown for picking one option from a long list. Opens a popover with auto-focused search, powered by cmdk.

• Selected item shows a check mark; selecting again deselects
• Escape clears search first, then closes on second press
• Hidden input for native form submission

Multi select

Searchable dropdown for picking multiple options. Selected items appear as removable chips.

• Popover stays open after each selection
• Backspace removes the last chip
• maxDisplay controls chip count before "+N more"
• max limits total selections

Input OTP

Separate fields for each digit of a one-time password.

• Auto-focuses the next field on input
• Paste fills all fields at once

File uploader

Compound component for file upload. Primary use: KYC verification (ID documents, proof of address, selfie).

Four parts: FileUpload (root state manager), FileUploadDropzone (drag-and-drop area), FileUploadItem (file row with progress), and FileUploadItemList (renders all items).

States

Date picker

Single date selection with typed input and calendar popover.

• Typing-first: dashes insert automatically as users type DD-MM-YYYY
• Month/year dropdown navigation for fast jumping (ideal for DOB)
• Invalid input reverts to previous valid date on blur

Currency input

Formatted money input with currency symbol prefix and code suffix. Uses inputMode="decimal" for the right mobile keyboard without native spinners.

• Focus shows raw number (1250.00), blur applies locale formatting (1,250.00)
• Fraction digits adapt to currency (KRW = 0, USD = 2)
• Currency symbol from Intl.NumberFormat -- no hardcoded table

Variants

Sizes

Phone input

Phone number entry with country code selector. Uses a SearchSelect dropdown showing flag and dial code alongside a tel input.

• Accepts raw digits only -- paste strips non-numeric characters
• suggestedCountries prop shows a "Suggested" group at the top

Password input

Password entry with show/hide toggle. Eye icon toggles type between password and text, then returns focus to the input.

Strength indicator

When showStrength is true and value is non-empty, a strength bar appears below.

Scoring: +1 for 8+ characters, +1 for a digit, +1 for a special character, +1 for 12+ characters with all above met.

Masked input

Auto-formatted text entry. Mask characters: 0 = digit, A = letter, * = alphanumeric. Everything else is a literal separator inserted automatically.

Presets

For expiry masks, typing a first digit > 1 auto-prepends "0" (typing "5" becomes "05"). detectCardBrand(digits) returns "visa", "mastercard", "amex", or "unknown" for dynamic card icons.

Form field

Wraps a label, input, helper text, and error into one accessible unit. You provide the input as children -- FormField doesn't render its own.

• FormLabel links to the input via htmlFor
• FormDescription shows helper text, hidden when an error is active
• FormMessage shows the error with role="alert"
• Required fields get an asterisk in the label

Design and accessibility

Every input needs a visible label above the field. Error states use color, icon, and text together -- never color alone. Group related inputs with a <fieldset> and legend.

All error inputs must include aria-invalid="true" and aria-describedby pointing to the error message. Switch uses role="switch" with aria-checked. Radio cards convey selection through three independent signals: border weight, background tint, and indicator fill.

Components requiring aria-label (no visible label rendered): CurrencyInput, PhoneInput, PasswordInput, MaskedInput. Password strength uses role="status" with aria-live="polite".