A checkbox allows a user to select a value from a small set of options, often binary




A standard checkbox


A checkbox can be formatted to emphasize the current selection state


A checkbox can be formatted to show an on or off choice

Radio Box

A checkbox can be formatted as a radio element. This means it is an exclusive option.



A checkbox can be read-only and unable to change states


A checkbox can be read-only and unable to change states

A checkbox can be disabled by either setting the disabled attribute on the hidden input, or class disabled on the ui checkbox



A fitted checkbox does not leave padding for a label


Uncheckable Checkboxes

To make a user able to check a box, but unable to uncheck it, use the uncheckable setting.

To always disable a checkbox, add the property disabled to your input.

To make a checkbox read-only do not initialize it, or include the read-only class which will not allow toggle events.

$('#demo3') .checkbox({ uncheckable: false }) ;

Attaching Events to other Elements

Checkbox can use the attach events behavior to attach events easily to other activating elements. This defaults to toggling, but other behaviors can be used as well.

$('.test.checkbox').checkbox('attach events', '.toggle.button'); $('.test.checkbox').checkbox('attach events', '.check.button', 'check'); $('.test.checkbox').checkbox('attach events', '.uncheck.button', 'uncheck');



A checkbox can be initialized with javascript for increase programmatic control

$('.ui.checkbox') .checkbox() ;

Basic Checkbox

A checkbox can also be used without using javascript by matching the id attribute of the input field to the for attribute of the accompanying label


Behaviors are accessible with javascript using the syntax:

$('.ui.checkbox').checkbox('behavior', argumentOne, argumentTwo...);
toggle Switches a checkbox from current state
check Set a checkbox state to checked
uncheck Set a checkbox state to unchecked
attach events(selector, behavior) Attach checkbox events to another element
enable Enable interaction with a checkbox
disable Disable interaction with a checkbox
is radio Returns whether element is radio selection
is checked Returns whether element is currently checked
is unchecked Returns whether element is not checked
can check Returns whether element is able to be checked


These settings are specific to checkbox, and determine the parameters of its behavior

Default Description
uncheckable auto Setting to true/false will determine whether an input will allow no selection. Auto will set disallow this behavior only for radio boxes
fireOnInit true Whether callbacks for checked status should be fired on init as well as change
Context Description
onChange HTML input element Callback after a checkbox is either checked or unchecked.
onChecked HTML input element Callback after a checkbox is checked.
onUnchecked HTML input element Callback after a checkbox is unchecked.
onEnable HTML input element Callback after a checkbox is enabled.
onDisable HTML input element Callback after a checkbox is disabled.


These settings are native to all modules, and define how the component ties content to DOM attributes, and debugging settings for the module.

Default Description
name Checkbox Name used in log statements
namespace checkbox Event namespace. Makes sure module teardown does not effect other events attached to an element.
selector : { input : 'input[type=checkbox], input[type=radio]', label : 'label' }
Selectors used to find parts of a module
className : { checked : 'checked', disabled : 'disabled', radio : 'radio', readOnly : 'read-only' }
Class names used to determine element state
debug false Debug output to console
performance true Show console.table output with performance metrics
verbose false Debug output includes all internal behaviors
error : { method : 'The method you called is not defined.' }

Dimmer Message
Dimmer sub-header