Input Variants

Standard, decorated, validated, sized, and specialized inputs across the MTVerse design system.

Standard & Decorated

Plain inputs with leading or trailing icons.

Full Name

Email Address

Username

Password

Buttons & Affixes

Append and prepend button actions.

Coupon Code

Newsletter

Domain lookup

https://

Helper Text & Validation

Helper hints and error / success states.

Username

Lowercase letters, numbers, and hyphens. 3–20 characters.

Email verified on Mar 12, 2025.

Recovery Email

Please enter a valid email address.

Account ID

Account ID cannot be changed.

Sizes & Specialized

Input sizes, OTP, and search with live results.

Small

Default

Large

Two-factor code

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Live search

Textarea & Long-form

Multi-line inputs with helper text and character count.

Bio

Max 280 characters.

Comment