--- layout : 'default' css : 'checkbox' element : 'checkbox' elementType : 'module' title : 'Checkbox' description : "A checkbox allows a user to select a value from a small set of options, often binary" type : 'UI Module' themes : ['Default'] --- <%- @partial('header', { tabs: 'module' }) %>

Types

Checkbox

A standard checkbox

Slider

A checkbox can be formatted to emphasize the current selection state

Toggle

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.

States

Read-only

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

Disabled

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


Examples

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');
Toggle
Check
Uncheck

Initializing

Checkbox

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

Behavior

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

Checkbox

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 disabled or enabled.
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.

Module

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
selector : { input : 'input[type=checkbox], input[type=radio]', label : 'label' }
Selectors used to find parts of a module
className
className : { checked : 'checked', disabled : 'disabled', radio : 'radio', readOnly : 'read-only' }
Class names used to determine element state
debug false Debug output to console
performance false Show console.table output with performance metrics
verbose false Debug output includes all internal behaviors
errors
error : { method : 'The method you called is not defined.' }