shadcn.io is not affiliated with official shadcn/ui
Select Industries Served Block for React Aria
A Select of six industries that drives one panel: the count of businesses, three use cases and the featured names, with the page holding its height.
Installation
Overview
An industries block for React with React Aria, written for Sectorly, a fictional field-service app for crews on the road. A split under a shared top rule: the start column holds the title, an Industry Select of six trades and a live count of the businesses in the one chosen; the end column, behind a split divider, is a single panel with that industry's three use cases and the businesses featured in it, as plain text. All six panels sit in one grid cell, the chosen one visible and the rest unseen, so choosing an industry never moves the page. It is built from Select and Guides. Businesses and figures are example data.
FAQ
How does choosing an industry work?
The Select holds the chosen id in state. The count and its sentence follow it, and the panel for that id becomes visible while the others stay unseen in the same grid cell.
Why does the page not move when I change industry?
All six panels share one grid cell, so the cell is always as tall as the tallest panel. The ones not showing are invisible and inert, so they can't be reached or read.
Is the change announced?
Yes. The count and its sentence are a polite status region, so a screen reader reads the new industry's figure when you choose it.
Does it behave the same on every base?
The Select is each base's own, so the popup, its keyboard handling and the value it reports differ underneath, and the block adapts to each. What you see and what the keyboard does is the same: open it, move with the arrows and choose with Enter.