Text Field Design

Patterns for input fields that feel native, accessible, and unmistakably Meridian.

1. Floating Label

Label sits inside the field as placeholder, then animates upward on focus or when filled. Keeps the UI compact without sacrificing clarity.

Email address

Feedback appears immediately below the field — green check for valid, red message for errors. Never leave the user guessing after they tab away.

✓ Valid email

Leading or trailing icons convey purpose instantly — search, lock, currency. Use violet for the icon to tie into the brand.

For longer input, use a textarea with a subtle glow on focus. Keep the same border treatment as single-line fields for consistency.