UI Recipe

Card Input Field

A polished single-line text input wrapped in a card container with icon, label, and validation state.

Email address

Password

Must be at least 8 characters

Usage

Wrap a native <input> in a card with a label and optional icon. Use focus-within to highlight the card border on focus. Swap border and background colors for error, success, or active states.