Input
Inset-first fields for calm forms, with an optional elevated variant for standalone emphasis.
Basic Usage
Default inputs are Level 1 (Inset) for forms and card interiors.
Variants
Use default for nested surfaces, and elevated when the input is the focal object.
Default (Inset / Level 1)
Elevated (Level 3)
Sizes
States
Please enter a valid email address.
Best Practices
Let containers carry elevation; keep fields inset and actions flat.
Newsletter
Nested in Card - Input stays inset, action uses flat variants.
Standalone Search
Standalone - use variant="elevated".
Anti-patterns
Avoid double-elevation: don't place elevated inputs inside elevated containers.
Bad: Elevated inside Card
Good: Inset inside Card
API Reference
Inset-first input with a subtle elevated option.
PropTypeDescription
variant"default" | "elevated"Surface elevation (default: inset/flat).size"sm" | "default" | "lg"Controls height, padding, and corner radius.aria-invalidbooleanApplies destructive border/ring styling when truthy.