tabler/pages/_docs/form-elements.md

title, bootstrap-link

title	bootstrap-link
Form Elements	components/forms/

Classic Input

{% example %}

Static

Username

Text

Disabled

Readonly

{% endexample %}

Password and validation

{% example %}

Password

Valid State

Invalid State

Invalid feedback

{% endexample %}

Input size

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

Select

{% example %} {% include parts/select.html options="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 %}

Input color picker

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

Datalists

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

Custom selectboxes

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

Toggle switches

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

Radios

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

Checkboxes

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

Range input

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

Sample form

{% example %} {% include parts/form-fieldset.html %} {% 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 %} {% include parts/input-icon-separated.html %} {% endexample %}

Custom Input examples

{% example %}

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

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

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

Price {% include ui/form/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 %}