tabler/pages/_docs/form-elements.md

title, bootstrap-link

title	bootstrap-link
Form Elements	components/forms/

Classic Input

{% capture code %}

Static

Username

Text

Disabled

Readonly

{% endcapture %} {% include example.html code=code %}

Password and validation

{% capture code %}

Password

Valid State

Invalid State

Invalid feedback

{% endcapture %} {% include example.html code=code %}

Input size

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

Select

{% capture code %} {% include parts/form/select.html options="Germany,USA,Poland" %} {% endcapture %} {% include example.html code=code %}

Textarea

{% capture code %}

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!

{% endcapture %} {% include example.html code=code %}

Image check

{% capture code %} {% include parts/form/input-image.html %} {% endcapture %} {% include example.html code=code %}

Input color

{% capture code %} {% include parts/form/input-color.html %} {% endcapture %} {% include example.html code=code %}

Input color picker

{% capture code %} {% include parts/form/input-colorpicker.html %} {% endcapture %} {% include example.html code=code %}

Datalists

{% capture code %} {% include parts/form/input-datalist.html %} {% endcapture %} {% include example.html code=code %}

Custom selectboxes

{% capture code %} {% include parts/form/input-selectgroups.html %} {% endcapture %} {% include example.html code=code %}

Toggle switches

{% capture code %} {% include parts/form/input-toggle.html %} {% include parts/form/input-toggle-single.html %} {% endcapture %} {% include example.html code=code %}

Radios

{% capture code %} {% include parts/form/input-radios.html %} {% include parts/form/input-radios-inline.html %} {% endcapture %} {% include example.html code=code %}

Checkboxes

{% capture code %} {% include parts/form/input-checkboxes.html %} {% include parts/form/input-checkboxes-inline.html %} {% endcapture %} {% include example.html code=code %}

Range input

{% capture code %} {% include parts/form/input-range.html %} {% endcapture %} {% include example.html code=code %}

Sample form

{% capture code %} {% include parts/form/fieldset.html %} {% endcapture %} {% include example.html code=code %}

Input group

{% capture code %}

Input group

Go!

Input group buttons

Action

News Messages

Edit Profile

{% endcapture %} {% include example.html code=code %}

Input with icon

{% capture code %} {% include parts/form/input-icon.html %} {% endcapture %} {% include example.html code=code %}

Separated inputs

{% capture code %} {% include parts/form/input-icon-separated.html %} {% endcapture %} {% include example.html code=code %}

Custom Input examples

{% capture code %}

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://tabler.io/users/" %}

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

{% endcapture %} {% include example.html code=code %}

Date component

{% capture code %}

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 %}

{% endcapture %} {% include example.html code=code %}

Input with button

{% capture code %}

Button input

Action

Action Another action Something else here

Separated link

{% endcapture %} {% include example.html code=code %}