tabler/pages/_docs/form-elements.md

title, bootstrap-link

title	bootstrap-link
Form Elements	components/forms/

Classic Inputs

{% capture code %} {% include parts/form/input.html type="text" hint="Here's some more info." %} {% include parts/form/input.html type="password" hint="Here's some more info." %} {% endcapture %} {% include example.html code=code %}

Textarea and select

{% capture code %} {% include parts/form/input.html type="textarea" %}

{% include parts/form/select.html %} {% include parts/form/select.html label="Select multiple" multiple=true %} {% endcapture %} {% include example.html code=code %}

Validation states

{% capture code %} {% include parts/form/validation-states.html %} {% endcapture %} {% include example.html code=code %}

Subtle validation states

{% capture code %} {% include parts/form/validation-states.html lite=true %} {% endcapture %} {% include example.html code=code %}

Input size

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

Image check

{% capture code %} {% include parts/form/input-image.html %} {% endcapture %} {% include example.html code=code max-width="25rem" %}

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