mirror of
https://github.com/tabler/tabler.git
synced 2025-12-24 10:48:14 +04:00
90 lines
3.5 KiB
HTML
90 lines
3.5 KiB
HTML
<div class="form-group">
|
|
<label class="form-label">Password</label>
|
|
<input type="password" class="form-control" name="example-password-input" placeholder="Password..">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Valid State</label>
|
|
<input type="text" class="form-control is-valid" name="example-text-input-valid"
|
|
placeholder="Valid State..">
|
|
|
|
<input type="text" class="form-control mt-3 state-valid" value="Valid state">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Invalid State</label>
|
|
<input type="text" class="form-control is-invalid" name="example-text-input-invalid"
|
|
placeholder="Invalid State..">
|
|
<div class="invalid-feedback">Invalid feedback</div>
|
|
|
|
<input type="text" class="form-control mt-3 state-invalid" value="Invalid state">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Country</label>
|
|
<select class="form-control custom-select">
|
|
<option value="">Germany</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Ratios</label>
|
|
<input type="range" class="custom-range" step="5" min="0" max="50">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Size</label>
|
|
{% include ui/input-selectgroup.html values="S,M,L,XL,XXL" type="radio" name="size" %}
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Shipping methods</label>
|
|
{% include ui/input-selectgroup.html values="Unregistered,Priority Mail,Express Mail" class="selectgroup-vertical" type="radio" name="shipping-method" %}
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Icons input</label>
|
|
{% include ui/input-selectgroup.html values="i:smartphone,i:tablet,i:monitor,i:x" class="w-100" type="radio" name="device" %}
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Icon input</label>
|
|
{% include ui/input-selectgroup.html values="i:sun,i:moon,i:cloud-rain,i:cloud,Other" class="selectgroup-pills" %}
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Your skills</label>
|
|
{% include ui/input-selectgroup.html values="HTML,CSS,PHP,JavaScript" class="selectgroup-pills" %}
|
|
</div>
|
|
|
|
{% include parts/input-toggle.html %}
|
|
|
|
<div class="form-group">
|
|
<div class="form-label">Toggle switch single</div>
|
|
<label class="custom-control custom-switch">
|
|
<input type="checkbox" class="custom-control-input">
|
|
<div class="custom-control-label">I agree with terms and conditions</div>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<div class="form-label">Radios</div>
|
|
<div class="custom-controls-stacked">
|
|
<label class="custom-control custom-radio">
|
|
<input type="radio" class="custom-control-input" name="example-radios" value="option1"
|
|
checked>
|
|
<div class="custom-control-label">Option 1</div>
|
|
</label>
|
|
<label class="custom-control custom-radio">
|
|
<input type="radio" class="custom-control-input" name="example-radios" value="option2">
|
|
<div class="custom-control-label">Option 2</div>
|
|
</label>
|
|
<label class="custom-control custom-radio">
|
|
<input type="radio" class="custom-control-input" name="example-radios" value="option3"
|
|
disabled>
|
|
<div class="custom-control-label">Option Disabled</div>
|
|
</label>
|
|
<label class="custom-control custom-radio">
|
|
<input type="radio" class="custom-control-input" name="example-radios2" value="option4"
|
|
disabled checked>
|
|
<div class="custom-control-label">Option Disabled Checked</div>
|
|
</label>
|
|
</div>
|
|
</div>
|