This translation is only % complete!
We need your help to make Semantic available to people who speak your language.
Our translation tools are easy to use and allow you to translate text without having to leave the site.
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
Variations
Fitted
A fitted checkbox does not leave padding for a label
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');
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 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. |
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 | true | 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.'
}
|
|