sunweb

Checkbox

components checkbox form elements

Definition


The checkbox is a well known form component used to set or unset one or more chices from some user eligible options.

c-checkbox

Handlebars

Loading...

Our checkbox should be accessible, so here you can see some stacked ones, browsable by using "Tab" & "Space" keys.

Handlebars

Loading...

In 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.

c-checkbox with icon

Handlebars

Loading...
c-checkbox with count

Handlebars

Loading...

Handlebars

Loading...
c-checkbox with additional text

Handlebars

Loading...
c-checkbox with count and additional text

Handlebars

Loading...
c-checkbox with icon, count and additional text

Handlebars

Loading...
c-checkbox with illustration, count and additional text

Handlebars

Loading...

Javascript

Loading...
c-checkbox with html

Handlebars

Loading...

Javascript

Loading...

States


c-checkbox is-half-checked

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

Loading...

c-checkbox is-disabled

The disabled state blocks the users interaction and modifies the appearance to let them know that the component is not useful at this moment.

Handlebars

Loading...

c-checkbox is-unresolved

The unresolved state is used when text is not yet ready, and needs to be resolved asynchronously.

Handlebars

Loading...

Handlebars

Loading...

Validation states


c-checkbox has-success

Handlebars

Loading...

c-checkbox has-warning

Handlebars

Loading...

c-checkbox has-error

Handlebars

Loading...