Cards Activity Home Payments More
Back to Components

# Inputs

All the input styles you could ever need, styled to match your device and powered by HTML5 validation for maximum compatibility.

Note: To view all available styles, use the toggles below to switch between views. Inputs have a variety of styles available.

##### Show / Hide Icons

##### Boxed / Unboxed Layout

##### Inside / Floating Label

Your Name
Excellent!
Name is Missing or Invalid
(required)
Your Email
Email address looks good!
Email is missing or is invalid.
(required)
Your Password
Password address looks good!
Minumum 8 characters, 1 Number and 1 Capital Letter.
(required)
Your Phone
Phone Number looks good!
Phone Number is missing or is invalid.
(required)
Your Website
The URL looks good!
Website is missing or is invalid.
(required)
Select a Date
HTML5 does not offer Dates Field Validation!
Select an Option
HTML5 does not offer Dates Field Validation!
Your Message
HTML5 does not offer Dates Field Validation!

#### Colors, Sizes, Always Active

The input fields allow you to always show the label, set coloured icons or even increase the font size all from simple utility classes.

Your Name
Excellent!
Name is Missing or Invalid
(required)

### Checkbox and Radio Styles

All the input styles you could ever need, styled to match your device and powered by HTML5 validation for maximum compatibility.

Classic 1
Classic 2
Classic 3
Minimalist
Thumbs Up
Smile/Emoji
Classic 1
Classic 2
Classic 3
Minimalist
Thumbs Up
Star/Love

#### Range Sliders

Mobile friend range sliders with classic CSS code. Fully compatible with any mobile device.

###### Classic Range Slider

###### Slider Thumb Inside

###### Range Slider Modern

### File Upload

All the input styles you could ever need, styled to match your device and powered by HTML5 validation for maximum compatibility.

- Using WebAPI's
- Retrieve file data and info
- Preview the Uploaded Image

Upload Image

### Switches

Platform agnostic switches with color highlights. Built using inputs for perfect integration in any scenario.

- Android and iOS
- Multiple Colors
- Can Contain icons
- Small, Medium, Large
- Ability to Toggle Content
- Ability to Toggle Dark Mode

#### iOS Styled

Designed to look like iOS switches, they support multiple colors and the ability to add icons or text inside the switch.

##### iOS Switch Classic

##### iOS Switch with Icon

##### iOS Switch with Text

ON OFF

#### What can Switches do?

Switches can be used to toggle content, show dark modes or any other purpose where an input or a toggle feature can be used! The sky is the limit!

##### Toggle Box Content

This content is hidden by default but revealed when the user taps. It can be shown by default too!

##### Toggle Dark Mode

#### Android Styled

Designed to look like iOS switches, they support multiple colors and the ability to add icons or text inside the switch.

##### Android Switch Classic

##### Android Switch Short

#### Different Sizes

Select your favorite size. It's easy. Just add a class!

##### Small

##### Medium

##### Large

##### Small

##### Medium

##### Large

#### Steppers

Perfect for increasing your quantity in carts or setting higher or lower values.

###### Classic Icons

###### Color Icons

###### Text Labels

Less More
Less More