A UX Guide to Microinteractions
  • Basics
    • Introduction
  • Criterion
    • Criteria
    • Component Groups
    • Motion Functions
    • Motion Principles
  • The System
    • Action Components
      • Button
      • Floating Action Button
      • Icon Button
    • Communication Components
      • Onboarding
      • Progress Indicators
      • System Status
    • Navigation Components
      • Nav Bar
    • Selection Components
      • Checkbox
      • Radio Button
      • Sliders
      • Switches
      • Pickers
    • Input Components
      • Text Input
      • Audio Input
  • References
    • Cited Works
Powered by GitBook
On this page
  • Motion Functions
  • Examples

Was this helpful?

  1. The System
  2. Selection Components

Checkbox

Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.

PreviousSelection ComponentsNextRadio Button

Last updated 1 year ago

Was this helpful?

Motion Functions

The function of motion within a checkbox is to give users feedback on the properties they have selected. Motion can orient users' actions and ease the transition between selection and feedback.

Examples

In the above examples of checkboxes, the motion is offset with an initial state either on hover or right before being pressed, which then transitions into the checked state. Having different states helps orient the user to what action is being performed and which checkbox they are currently clicking on.

Cover

Feedback Function

Checkbox by Aaron Iker.
Checkbox Selection UI by Roman Kamushken