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

Radio Button

Radio buttons allow users to select one option from a set.

PreviousCheckboxNextSliders

Last updated 1 year ago

Was this helpful?

Motion Functions

The function of motion in a radio button is Feedback. Motion can highlight the relationship between radio buttons that are clicked on. As radio buttons are used to select a single option, motion can show the relationship of the selection from one button to the next.

Examples

In these radio buttons, motion is used to convey the movement of the selection button from top to bottom or left to right. Using the principles of masking, the selection seems to move behind the interface between states and adds a layer of dimensionality to the interface.

Cover

Feedback Function

UI // Radio Button by Cosimo Scarpa
CSS UI Interactive Elements by bg-d