Here is some information about what turning this feature on will do.
LUMEN
Menu
<div class="ui checkbox">
<input type="checkbox" id="checkbox1" name="checkbox" checked>
<label for="checkbox1">.ui.checkbox</label>
</div>
<div class="ui cf checkbox">
<input type="checkbox" id="checkbox2" name="checkbox" checked>
<label for="checkbox2">.ui.cf.checkbox</label>
</div>
<div class="ui radio checkbox">
<input type="radio" name="radio" id="radio1">
<label for="radio1">.ui.radio.checkbox</label>
</div>
<div class="ui cf radio checkbox">
<input type="radio" name="radio" id="radio2">
<label for="radio2">.ui.cf.radio.checkbox</label>
</div>
Note: Even if no label text is desired, a label element still needs to be present
<div class="ui green cf toggle checkbox example-1">
<input type="checkbox" name="public">
<div class="frame">
<div class="toggler"></div>
</div>
<label>
Simple toggle checkbox
</label>
</div>
<script>
$('.checkbox.example-1').checkbox();
</script>
<div class="ui green cf toggle checkbox example-2">
<input type="checkbox" name="public">
<div class="frame">
<div class="toggler"></div>
<div class="text centered">
<span class="off">DIFFERENT</span>
<span class="on">TEXT</span>
</div>
</div>
<label>
Simple toggle checkbox with <b>centered text</b>
</label>
</div>
<script>
$('.checkbox.example-2').checkbox();
</script>
<div class="ui green cf toggle checkbox example-3">
<input type="checkbox" name="public">
<div class="frame">
<div class="toggler">
<i class="bell slash icon off"></i>
<i class="bell icon on"></i>
</div>
<div class="text centered">
<span class="off">DRAFT</span>
<span class="on">LIVE</span>
</div>
</div>
<label>
Simple toggle checkbox with <b>centered text and changing icon</b>
</label>
</div>
<script>
$('.checkbox.example-3').checkbox();
</script>
<div class="ui green cf toggle checkbox example-4">
<input type="checkbox" name="public">
<div class="frame">
<div class="toggler">
<i class="bell slash icon off"></i>
<i class="bell icon on"></i>
</div>
<div class="text partially active">
<span class="off">DRAFT <ins>OFF</ins></span>
<span class="on">DRAFT <ins>ON</ins></span>
</div>
</div>
<label>
Simple toggle checkbox with <b>active text and Icon</b>
</label>
</div>
<script>
$('.checkbox.example-4').checkbox();
</script>
Here we add a few callback methods when the toggle is changed
Here is some information about what turning this feature on will do.
Here is some information about what turning this feature off will do.
<div class="ui green cf toggle checkbox with-callback">
<input type="checkbox" name="public">
<div class="frame">
<div class="toggler"></div>
<div class="text centered">
<span class="off">DIFFERENT</span>
<span class="on">TEXT</span>
</div>
</div>
<div class="ui modal checked">
<div class='header'>
<h1>You checked me!</h1>
</div>
<div class='content'>
<p>Here is some information about what turning this feature on will do.</p>
</div>
</div>
<div class="ui modal unchecked">
<div class='header'>
<h1>You unchecked me!</h1>
</div>
<div class='content'>
<p>Here is some information about what turning this feature off will do.</p>
</div>
</div>
<label></label>
</div>
<script>
$(function(){
$('.checkbox.with-callback').checkbox({
onChecked: function(){
$('.checkbox.with-callback .ui.modal.checked').modal('show');
},
onUnchecked: function(){
$('.checkbox.with-callback .ui.modal.unchecked').modal('show');
}
});
})
</script>
On toggle, we present the user with a modal making them confirm their decision.
contacts who have not reached this point in the follow up funnel will not receive this step, while it is paused. Are you sure you want to pause this step
Are you ready to get your content out there? (You can Pause and edit your step at anytime)
<div class="ui green cf toggle checkbox with-confirm-callback">
<input type="checkbox" name="public">
<div class="frame">
<div class="toggler"></div>
<div class="text centered">
<span class="off">DIFFERENT</span>
<span class="on">TEXT</span>
</div>
</div>
<div class="ui tiny modal confirm unchecked">
<div class='header' style="text-align: center;">
<i class="ui icon huge plug"></i>
<h2>You're about to pause</h2>
</div>
<div class='content'>
<p>
contacts who have not reached this point in the follow up funnel will
not receive this step, while it is paused. Are you sure you want to
pause this step
</p>
</div>
<div class='actions'>
<div class="ui grid two columns">
<div class="row">
<div class="left floated left aligned column eight">
<div class="ui cancel button">Cancel</div>
</div>
<div class="right floated right aligned column eight">
<div class="ui primary approve button">Confirm</div>
</div>
</div>
</div>
</div>
</div>
<div class="ui tiny modal confirm checked">
<div class='header' style="text-align: center;">
<i class="ui green icon huge plug"></i>
<h2>You're about to go live</h2>
</div>
<div class='content'>
<p>
Are you ready to get your content out there?
(You can Pause and edit your step at anytime)
</p>
</div>
<div class='actions'>
<div class="ui grid two columns">
<div class="row">
<div class="left floated left aligned column eight">
<div class="ui cancel button">Cancel</div>
</div>
<div class="right floated right aligned column eight">
<div class="ui primary approve button">Confirm</div>
</div>
</div>
</div>
</div>
</div>
<label></label>
</div>
<script>
$(function(){
$('.checkbox.with-confirm-callback').checkbox({
beforeChecked: function(){
$('.ui.modal.confirm.checked').modal({
onApprove: function(el){
$('.checkbox.with-confirm-callback').checkbox('set checked');
}
}).modal('show');
return false;
},
beforeUnchecked: function(){
$('.ui.modal.confirm.unchecked').modal({
onApprove: function(el){
$('.checkbox.with-confirm-callback').checkbox('set unchecked');
}
}).modal('show');
return false;
}
});
})
</script>
A checkbox can be indeterminate
<div class="ui checkbox">
<input type="checkbox">
<label>Indeterminate</label>
</div>
<script>
$(".ui.checkbox").checkbox('set indeterminate')
</script>
<div class="ui green cf toggle checkbox">
<input type="checkbox" name="public">
<div class="frame">
<div class="toggler"></div>
</div>
<label>
Simple toggle checkbox
</label>
</div>
<script>
$(".ui.checkbox").checkbox('set indeterminate')
</script>