Status Radio Toggle Awards Block for React

Edit AWARDS: each has a title, a programme, a status (won, shortlisted or entered), a shape for its drawn mark and the ISO date when it reached that status. The pill counts and the header sentence are counted from the list.

A radio group already does everything a switch like this needs: one choice at a time, arrow keys moving and choosing, Tab entering and leaving the group once, and a name and state for assistive technology. The pills are labels around visually hidden radios, so nothing is reimplemented and it works the same on every library.

The four pills are equal width, so the thumb's position is a CSS calculation from the chosen index (--i) with no measuring. It only moves on a choice, and under reduced motion it jumps.

No. An unseen copy of all eleven rows sits in the same grid cell as the live list, so the block keeps its height. On a phone the switch scrolls sideways.

Each chip has an icon, a word and its own outline: a filled chip for Won, a solid outline for Shortlisted, a dashed one for Entered. The word is in the text, so a screen reader hears it with the award.

No. Every programme, award and product here is made up for the example, and the dates are fixed in the data. Swap in your own entries and results.