Versions Compared

Version Old Version 72 New Version Current
Changes made by

Hasitha Jayarathne

Hasitha Jayarathne

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

State

Unchecked

Checked

Partially selected

Regular

Image RemovedImage AddedImage RemovedImage AddedImage RemovedImage Added

Hover

Image RemovedImage AddedImage RemovedImage AddedImage RemovedImage Added

Active

Image RemovedImage AddedImage RemovedImage AddedImage RemovedImage Added

Disabled

Image RemovedImage AddedImage RemovedImage Added

Read-Only

Unchecked.pngImage ModifiedChecked.pngPartially checked.png

Focused

Image RemovedImage AddedImage RemovedImage AddedImage RemovedImage Added

Focused, Hover

Image RemovedImage AddedImage RemovedImage AddedImage RemovedImage Added

Focused, Active

Image RemovedImage AddedImage RemovedImage AddedImage RemovedImage Added

Focused, Disabled

Image RemovedImage AddedImage RemovedImage AddedImage RemovedImage Added

Interaction

  • Clicking a checkbox toggles between the ‘checked' and ‘unchecked’ modes.

  • For checkboxes in the partially selected state, clicking them will move them to the 'checked' state and check all of its child checkboxes. An additional click will uncheck the master checkbox and all its child checkboxes.

  • Within a group of checkboxes, each checkbox can be checked or unchecked independently. The user can check multiple options.

  • The checkbox can be selected by clicking on either the checkbox or the label.

  • The checkbox will have a hovered state when hovering over either the checkbox or the label.

  • The checkbox will have an active state during the action of clicking either the checkbox or the label.

  • The partially selected state is visual only. This state can’t be achieved by a direct user interaction on the checkbox itself.

...