Amount selection

Making UI components accessible for everyone should be the norm. For example, a component like this should ideally be usable with both mouse and keyboard. Different active states indicate the user what's happening, and different peripherals (mouse, keyboard), have separate styles. In this example the keyboard active state doesn't persist when clicking with a mouse, resulting in a cleaner experience.

This is a sample component from my upcoming free course on building user interface components. Check out https://fullstackui.com for details and sign up to be notified when the course launches.

Happy designing!