Inset Border Card Grid Features Block for React

Each cell is one Cell with a title, a sentence and its control as the child, and the state for all six lives at the top of the component. Swap a control for another catalog item, or add one and its state; the cells line up on their wells whatever they hold.

It is local useState in the block, so the demo works on its own. In your app, replace the setters with your settings store or an API call; there is no save button, so each change should apply at once.

Yes. Every control has an accessible name that matches its title: the switch, the toggle group, the select and the segmented control through aria-label, the slider through its label, and the checkbox through its visible text. The slider reads its value as "16 px". The slider takes its name from its cell's heading.

It is a toggle group in multiple-selection mode with a small handler that keeps exactly one button pressed, so each button is a real toggle button with a pressed state. Pressing the pressed button does nothing; pressing another one moves the selection.

So the primary colour stays on a block's one call to action. The switch, the slider, the checkbox and the pressed toggle fill with the foreground colour, which also keeps them readable in every preset.

One column, about 190 pixels per cell. The toggle group, the select and the segmented control fill their wells, and nothing scrolls sideways at 320 pixels.