Definition
The checkbox is a well known form component used to set or unset one or more chices from some user eligible options.
Handlebars
Razor
Open in new tabOur checkbox should be accessible, so here you can see some stacked ones, browsable by using "Tab" & "Space" keys.
Handlebars
Razor
Open in new tabIn addition to component text, a count property and/or an additional text can be set to append an additional multi-purpose texts. Count property is commonly used in search filters to show how many results they will get by checking that option. Additional text is commonly used as a description.
Handlebars
Razor
Open in new tabHandlebars
Razor
Open in new tabHandlebars
Razor
Open in new tabHandlebars
Razor
Open in new tabHandlebars
Razor
Open in new tabHandlebars
Razor
Open in new tabHandlebars
Razor
Open in new tabJavascript
Handlebars
Razor
Open in new tabJavascript
States
The half checked state happens when a checkbox is the parent of others, and some of his children are selected, but some others not.
Handlebars
Razor
Open in new tabThe disabled state blocks the users interaction and modifies the appearance to let them know that the component is not useful at this moment.
Handlebars
Razor
Open in new tabThe unresolved state is used when text is not yet ready, and needs to be resolved asynchronously.