tabler/pages/_docs/form-elements.md

title

title
Form Elements

Classic Input

{% example %}

Static

Username

Text

Disabled

Readonly

{% endexample %}

Password and validation

{% example %}

Password

Valid State

Invalid State

Invalid feedback

{% endexample %}

Select

{% example %}

Country Germany USA Poland

{% endexample %}

Textarea

{% example %}

Textarea 56/100 Oh! Come and see the violence inherent in the system! Help, help, I'm being repressed! We shall say 'Ni' again to you, if you do not appease us. I'm not a witch. I'm not a witch. Camelot!

{% endexample %}

Image check

{% example %} {% include parts/input-image.html %} {% endexample %}

Input color

{% example %} {% include parts/input-color.html %} {% endexample %}

Custom Checkbox examples

{% example %}

Icons input {% include ui/input-selectgroup.html values="i:smartphone,i:tablet,i:monitor,i:x" class="w-100" type="radio" name="device" %}

Icon input {% include ui/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %}

Your skills {% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills" %}

Size {% include ui/input-selectgroup.html values="S,M,L,XL,XXL" type="radio" name="size" %}

Shipping methods {% include ui/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="selectgroup-vertical" type="radio" name="shipping-method" %}

{% endexample %}

Toggle switches

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

Toggle switch single

I agree with terms and conditions

{% endexample %}

Radios

{% example %}

Radios

Option 1

Option 2

Option Disabled

Option Disabled Checked

Inline Radios

Option 1 Option 2 Option 3

{% endexample %}

Checkboxes

{% example %}

Checkboxes

Option 1 Option 2 Option Disabled Option Disabled Checked

Inline Checkboxes

Option 1 Option 2 Option 3

{% endexample%}

Ratios

{% example %}

Ratios

{% endexample %}

Sample form

{% example %}

Full name*

Company*

Email*

Phone number

{% endexample %}

Input group

{% example %}

Input group

Go!

Input group buttons

Action

News Messages

Edit Profile

{% endexample %}

Input with icon

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

Separated inputs

{% example %}

Separated inputs

{% include ui/icon.html icon="search" %}

{% endexample %}

Custom Input examples

{% example %}

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

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

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

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

{% endexample %}

Date component

{% example %}

Date of birth

Month January February March April May June July August September October November December

Day {% for i in (1..31) %} {{ i }}{% endfor %}

Year {% for i in (1897..2014) reversed %} {{ i }}{% endfor %}

{% endexample %}

Input with button

{% example %}

Button input

Action

Action Another action Something else here

Separated link

{% endexample %}