Auth Forms
Sign-up, log-in, OAuth, password entry, and email and phone verification forms built with Plex UI.
Sign-up, log-in, password and verification screens composed from Float Input, OTP Input, Select, and Button. Settings and editing forms are on Settings Forms.
Auth examples share AuthInput, AuthFields, and their styles. Copy the helpers and CSS together. Phones use a single filled pill or linked rows without floating labels; desktop keeps FloatingLabelInput. The form owns values, validation and submission.
The screens share AuthFormStage and presentation controls. Copy their styles and helpers with the example. Grouped is the default mobile surface; Plain is optional. Page uses base colors and Dialog uses elevated colors. Keep field values in the owner above the presentation wrapper so switching Page/Dialog preserves them. The error control demonstrates a visual state; it does not validate a code.
About you, login and verification default to surface="grouped". Choose one surface for the steps of a flow; the palette adapts to light and dark mode on phones without changing the screen layout.
Auth screens use a shared Page shell in Phone view: a 54px toolbar area, a 10px gap before the form, and 16px side gutters. The dialog control switches to a mobile Sheet with its own toolbar. Individual input examples keep their component-only layout.
Log in (email)
Welcome back
Log in to your account.
Log in or sign up (OAuth)
Welcome back
Don't have an account?
Terms of UsePrivacy Policy
Sign up (phone)
Create your account
Enter your details to get started.
Log in (phone)
Welcome back
Enter your phone number to continue.
Enter password
Verify email or phone
Verify your email address
Enter the code sent to alex.johnson@example.com
About you (without labels)
Tell us about you
This helps us customize your experience.
Create password
Create Password
Storage location
Choose Storage Location
Select where your documents will be stored. This cannot be changed later.