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.
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
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 fitted checkbox does not leave padding for a label
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.
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.
A checkbox can be initialized with javascript for increase programmatic control
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:
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 |
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.'
}
|
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.
Semantic is available at semantic-ui.cn a mirror site hosted inside China. This should make browsing much faster for those visiting from mainland China.