Radio Select Dot
The chosen dot springs out of its ring while the previous one lets go a little faster.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useId, useState } from "react";
import { motion, useReducedMotion } from "motion/react";
/**
* Vibary · Radio Select Dot
*
* The chosen option's dot springs out of the center of its ring while
* the previous one lets go a little faster, so the handover has aAbout this pattern
A single-choice group where the handover has a direction. The arriving dot is a spring and the leaving one is a shorter eased tween, so the eye is pulled toward the new choice instead of watching two markers trade places at the same rate. The chosen row also tints, because a 4mm dot is not enough to carry the state across a whole form. Arrow keys move and select the way a radio group does everywhere else, and the group is one stop in the page's tab order rather than three.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Checkout
Whole-row selection with the marker as confirmation, not as the target.
Related patterns
- Toggle Group SelectOne highlight slides between grouped buttons and resizes to each label.
- Password Reveal ToggleDots hand over to the real characters one cell at a time as the eye takes its slash.
- Conditional Section RevealPicking an option unfolds the extra fields it requires, the section easing its height open.