---
title: Form Elements
---
### Classic Input
{% example %}
{% endexample %}
### Password and validation
{% example %}
{% endexample %}
### Select
{% example %}
{% endexample %}
### Textarea
{% example %}
{% endexample %}
### Image check
{% example %}
{% include parts/input-image.html %}
{% endexample %}
### Input color
{% example %}
{% include parts/input-color.html %}
{% endexample %}
### Custom Checkbox examples
{% example %}
{% include ui/input-selectgroup.html values="i:smartphone,i:tablet,i:monitor,i:x" class="w-100" type="radio" name="device" %}
{% include ui/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %}
{% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills" %}
{% include ui/input-selectgroup.html values="S,M,L,XL,XXL" type="radio" name="size" %}
{% 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 %}
{% endexample %}
### Radios
{% example %}
{% endexample %}
### Checkboxes
{% example %}
{% endexample%}
### Ratios
{% example %}
{% endexample %}
### Sample form
{% example %}
{% endexample %}
### Input group
{% example %}
{% endexample %}
### Input with icon
{% example %}
{% include parts/input-icon.html %}
{% endexample %}
### Separated inputs
{% example %}
{% endexample %}
### Custom Input examples
{% example %}
{% include ui/input-group.html prepend="@" placeholder="username" %}
{% include ui/input-group.html append=".tabler.io" placeholder="subdomain" %}
{% include ui/input-group.html prepend="https://example.com/users/" %}
{% include ui/input-group.html prepend="$" append=".00" %}
{% endexample %}
### Date component
{% example %}
{% endexample %}
### Input with button
{% example %}
{% endexample %}