Input

Clean, capsule-styled input fields designed for the Tinted Trays system. Precise borders, subtle shadows, and smooth interactions.

Default Input

Standard input with rounded corners, subtle shadow, and smooth focus transition.

Input Variants

Different visual styles to match various contexts within the design system.

Default

Capsule

Tray

Ghost

Underline

Input Sizes

Multiple size options for different UI contexts.

Small

Default

Large

Extra Large

Input States

Different states including disabled and error.

Normal

Disabled

Error

With Labels

Inputs paired with labels in a capsule container.

Email Address

Username

This will be your public display name.

Password

Input Types

Various HTML input types with consistent styling.

Text

Password

Number

Date

Time

URL

File Input

Styled file input for document uploads.

Upload Document

Upload with Tray Style

Search Pattern

Capsule-styled search input, commonly used in navigation.

⌘K

Best Practice: Context-Aware Variants

Choose input variants based on background context for optimal contrast and visual hierarchy.

On White Background → Tray Variant

Newsletter Signup

On Tray Background → Default Variant