Distribution Bar Filter Awards Block for React

Edit AWARDS and LABELS: each award has a title, a programme, a category key and a fixed year. The counts, the segment widths, the order of the pills and the percentages are all derived from that list.

The shares are worked out by largest remainder: each category gets its whole-percent floor, then the categories with the biggest fractions get the spare points. The line under the pills adds the shares of the pills you pressed.

Nothing: the bar is a drawing, hidden from assistive technology. The pills are a group of toggle buttons with aria-pressed, each reads its name and "4 of 20 awards", and the status line gives the totals after every change.

No. The bar keeps its left-to-right order so the segments, the pills and the percentages stay in step; the text around it follows the page's direction.

An unseen copy of all twenty rows sits in the same grid cell as the live list, so the block keeps its height while the matches stay at the top. On a phone the pills scroll sideways in one row.

No. Every programme, award and product here is made up for the example. Replace them with your own recognition; each year is fixed in the data, so an award given in 2025 stays 2025.