Radio
Input radio untuk memilih satu pilihan
<!-- Radio Basic -->
<div class="form-control">
<label for="" class="form-control__label">Radio<span class="important">*</span>
<span class="icon icon-information-circle"></span>
</label>
<div class="radio-button">
<input type="radio" class="form-control__radio" id="label-1" name="group">
<label for="label-1" class="form-control__label-radio">Radio Basic</label>
</div>
<div class="radio-button">
<input type="radio" class="form-control__radio" id="label-2" name="group">
<label for="label-2" class="form-control__label-radio">Radio Basic</label>
</div>
<div class="radio-button">
<input type="radio" class="form-control__radio" id="label-3" name="group" disabled>
<label for="label-3" class="form-control__label-radio">Radio Basic Disabled</label>
</div>
<div class="radio-button">
<input type="radio" class="form-control__radio" id="label-4" name="group 2" checked>
<label for="label-4" class="form-control__label-radio">Radio Basic Checked</label>
</div>
<div class="radio-button">
<input type="radio" class="form-control__radio" id="label-5" name="group 3" checked disabled>
<label for="label-4" class="form-control__label-radio">Radio Basic Checked Disabled</label>
</div>
</div>
<!-- End Radio Basic -->
<!-- Radio Basic Inline -->
<div class="form-control">
<label for="" class="form-control__label">Radio<span class="important">*</span>
<span class="icon icon-information-circle"></span>
</label>
<div class="radio-button-inline">
<input type="radio" class="form-control__radio" id="label-inline-1" name="group-inline" checked>
<label for="label-inline-1" class="form-control__label-radio">Radio Basic Inline</label>
</div>
<div class="radio-button-inline">
<input type="radio" class="form-control__radio" id="label-inline-2" name="group-inline">
<label for="label-inline-2" class="form-control__label-radio">Radio Basic Inline</label>
</div>
</div>
<!-- End Radio Basic Inline -->
Checkbox
Input checkbox untuk memilih lebih dari satu pilihan
<!-- Checkbox Basic -->
<div class="form-control">
<label for="" class="form-control__label">Checkbox Basic<span class="important">*</span>
<span class="icon icon-information-circle"></span>
</label>
<div class="checkbox">
<input type="checkbox" class="form-control__checkbox" id="check-1" name="group">
<label for="check-1" class="form-control__label-checkbox">Checkbox Basic</label>
</div>
<div class="checkbox">
<input type="checkbox" class="form-control__checkbox" id="check-2" name="group" checked>
<label for="check-2" class="form-control__label-checkbox">Checkbox Checked</label>
</div>
<div class="checkbox">
<input type="checkbox" class="form-control__checkbox" id="check-3" name="group" disabled>
<label for="check-3" class="form-control__label-checkbox label-checkbox_disabled">Checkbox Basic Disabled</label>
</div>
<div class="checkbox">
<input type="checkbox" class="form-control__checkbox" id="check-4" name="group" checked disabled>
<label for="check-4" class="form-control__label-checkbox label-checkbox_disabled">Checkbox Basic Checked Disabled</label>
</div>
</div>
<!-- Checkbox Basic Inline -->
<div class="form-control">
<label for="" class="form-control__label">Checkbox Basic Inline<span class="important">*</span>
<span class="icon icon-information-circle"></span>
</label>
<div class="checkbox-inline">
<input type="checkbox" class="form-control__checkbox" id="check-5" name="group" checked>
<label for="check-5" class="form-control__label-checkbox">Checkbox Basic Inline</label>
</div>
<div class="checkbox-inline">
<input type="checkbox" class="form-control__checkbox" id="check-6" name="group">
<label for="check-6" class="form-control__label-checkbox">Checkbox Basic Inline</label>
</div>
</div>
Switch
Toggle switch dari custom checkbox
<!-- Switch Basic-->
<div class="form-control">
<label for="" class="form-control__label">Switch Basic<span class="important">*</span>
<span
class="icon icon-information-circle"
></span>
</label>
<div class="switch">
<input type="checkbox" class="form-control__switch" id="switch-1" name="group">
<label for="switch-1" class="form-control__label-switch">Switch Basic</label>
</div>
<div class="switch">
<input type="checkbox" class="form-control__switch" id="switch-2" name="group" checked>
<label for="switch-2" class="form-control__label-switch">Switch Checked</label>
</div>
<div class="switch">
<input type="checkbox" class="form-control__switch" id="switch-3" name="group" disabled>
<label for="switch-3" class="form-control__label-switch label-switch_disabled">Switch Disabled</label>
</div>
<div class="switch">
<input type="checkbox" class="form-control__switch" id="switch-4" name="group" checked disabled>
<label for="switch-4" class="form-control__label-switch label-switch_disabled">Switch Checked Disabled</label>
</div>
</div>
<!-- Switch Basic Inline -->
<div class="form-control">
<label for="" class="form-control__label">Switch Basic Inline<span class="important">*</span>
<span
class="icon icon-information-circle"
></span>
</label>
<div class="switch-inline">
<input type="checkbox" class="form-control__switch" id="switch-5" name="group">
<label for="switch-51" class="form-control__label-switch">Switch Basic</label>
</div>
<div class="switch-inline">
<input type="checkbox" class="form-control__switch" id="switch-6" name="group" checked>
<label for="switch-6" class="form-control__label-switch">Switch Checked</label>
</div>
</div>
<!-- Switch With Icon-->
<div class="form-control">
<label for="" class="form-control__label">Switch With Icon<span class="important">*</span>
<span
class="icon icon-information-circle"
></span>
</label>
<div class="switch">
<input type="checkbox" class="form-control__switch" id="switch-7" name="group">
<label for="switch-7" class="form-control__label-switch">
<span class="checkMark">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.90019 9.85264L11.1375 4.30567C11.3982 3.96432 11.8863 3.89898 12.2277 4.15974C12.569 4.4205 12.6344 4.9086 12.3736 5.24996L7.62054 11.4721C7.34335 11.835 6.81466 11.8821 6.47765 11.574L3.45297 8.80861C3.13595 8.51876 3.11392 8.02679 3.40377 7.70977C3.69362 7.39275 4.18559 7.37072 4.50261 7.66057L6.90019 9.85264Z" fill="#0F6AF5"/>
</svg>
</span>
Switch With Icon
</label>
</div>
<div class="switch">
<input type="checkbox" class="form-control__switch" id="switch-8" name="group" checked>
<label for="switch-8" class="form-control__label-switch">
<span class="checkMark">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.90019 9.85264L11.1375 4.30567C11.3982 3.96432 11.8863 3.89898 12.2277 4.15974C12.569 4.4205 12.6344 4.9086 12.3736 5.24996L7.62054 11.4721C7.34335 11.835 6.81466 11.8821 6.47765 11.574L3.45297 8.80861C3.13595 8.51876 3.11392 8.02679 3.40377 7.70977C3.69362 7.39275 4.18559 7.37072 4.50261 7.66057L6.90019 9.85264Z" fill="#0F6AF5"/>
</svg>
</span>
Switch With Icon Checked
</label>
</div>
<div class="switch">
<input type="checkbox" class="form-control__switch" id="switch-9" name="group" disabled>
<label for="switch-9" class="form-control__label-switch label-switch_disabled">
<span class="checkMark">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.90019 9.85264L11.1375 4.30567C11.3982 3.96432 11.8863 3.89898 12.2277 4.15974C12.569 4.4205 12.6344 4.9086 12.3736 5.24996L7.62054 11.4721C7.34335 11.835 6.81466 11.8821 6.47765 11.574L3.45297 8.80861C3.13595 8.51876 3.11392 8.02679 3.40377 7.70977C3.69362 7.39275 4.18559 7.37072 4.50261 7.66057L6.90019 9.85264Z" fill="#0F6AF5"/>
</svg>
</span>
Switch With Icon Disabled
</label>
</div>
<div class="switch">
<input type="checkbox" class="form-control__switch" id="switch-10" name="group" checked disabled>
<label for="switch-10" class="form-control__label-switch label-switch_disabled">
<span class="checkMark">
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.90019 9.85264L11.1375 4.30567C11.3982 3.96432 11.8863 3.89898 12.2277 4.15974C12.569 4.4205 12.6344 4.9086 12.3736 5.24996L7.62054 11.4721C7.34335 11.835 6.81466 11.8821 6.47765 11.574L3.45297 8.80861C3.13595 8.51876 3.11392 8.02679 3.40377 7.70977C3.69362 7.39275 4.18559 7.37072 4.50261 7.66057L6.90019 9.85264Z" fill="#0F6AF5"/>
</svg>
</span>
Switch With Icon Checked Disabled
</label>
</div>
</div>