Input Component Examples

Basic Inputs

We'll never share your email with anyone else.

Size Variants

Small text size

Medium text size (default)

Large text size

Inputs with Icons

Inputs with Dropdown Addons

Select your country code and enter your phone number.

Select currency and enter the amount.

Select protocol and enter your domain.

Select email provider and enter your username.

Input States

This field is required and cannot be empty.

This input is currently disabled.

Notice the border color when filled.

This input is focused and shows the ring.

Different Input Types

Complex Inputs

$

Enter the price in dollars.

%

Username is available!

This username is already taken.

Form Example

Contact Information

Required

We'll never share your email.