Input Component
Capsule-shaped input fields with thin ink borders and orbit hover interaction.
Variants
Default variant has visible border, subtle variant is borderless with light fill.
Various Widths
Inputs can have different widths to fit various use cases.
With Icons
Inputs with leading or trailing icons for better context.
Password with Toggle
Password input with visibility toggle button.
With Prefix/Suffix
Inputs with inline text prefix or suffix.
With Button
Inputs combined with action buttons.
Framed Search Bar
Using outer frame with orbit hover and subtle inner input.
Grid Layout
Multiple inputs arranged in responsive grid layouts.
States
Various input states including disabled, invalid, and with pre-filled values.
This field is required.
Hover over inputs to see the orbit offset interaction.
Input Types
Different HTML input types with appropriate styling.
File Input
File upload input with capsule styling.
Complete Form Example
A complete login form demonstrating various input features.