Form elements

Static

Username

Text

Disabled

Readonly

Textarea 56/100

{% include parts/input-image.html %} {% include parts/input-color.html %}

Input group

Input group buttons

News Messages

Edit Profile

{% include parts/input-icon.html %}

Separated inputs

ZIP Code

Password

Valid State

Invalid State

Invalid feedback

Country

Ratios

Size

S M L XL

Shipping methods

Unregistered Priority Mail Express Mail

Icons input

{% include ui/icon.html icon="smartphone" %} {% include ui/icon.html icon="tablet" %} {% include ui/icon.html icon="monitor" %} {% include ui/icon.html icon="x" %}

Icon input

{% include ui/icon.html icon="sun" %} {% include ui/icon.html icon="moon" %} {% include ui/icon.html icon="cloud-rain" %} {% include ui/icon.html icon="cloud" %}

Your skills

HTML CSS PHP JavaScript Ruby Ruby C++

{% include parts/input-toggle.html %}

Toggle switch single

I agree with terms and conditions

Radios

Option 1

Option 2

Option Disabled

Option Disabled Checked

Inline Radios

Option 1 Option 2 Option 3

Checkboxes

Option 1 Option 2 Option Disabled Option Disabled Checked

Inline Checkboxes

Option 1 Option 2 Option 3

Bootstrap's Custom File Input

Choose file

Date of birth

Username {% include forms/input-group.html prepend="@" placeholder="username" %}

Subdomain {% include forms/input-group.html append=".tabler.io" placeholder="subdomain" %}

Your vanity URL {% include forms/input-group.html prepend="https://example.com/users/" %}

Price {% include forms/input-group.html prepend="$" append=".00" %}

Button input

Action Another action Something else here

Separated link