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

{% endexample %} ## Textarea {% example %}

Textarea 56/100

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

Input group buttons

{% endexample %} ## Input with icon {% example %} {% include parts/input-icon.html %} {% endexample %} ## Separated inputs {% example %}

Separated inputs

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

{% endexample %} ## Input with button {% example %}

Button input

{% endexample %}