Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Toggle Swap Problem Solution Block for React

A toggle that swaps the text of every row of one list between the problem and the answer in place, with an impact line under each.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A problem-and-solution block for React with Base UI, written for Sortwhistle, a fictional inbox-triage tool. One list of five moments in a shared inbox has two states. A two-item toggle in the header, The problem and Our answer, swaps every row's text in place. Both states of a row sit in one grid cell, so the list keeps its height and nothing moves. Each state ends with its own impact line, what the moment costs or what Sortwhistle saves. The rows run from rail to rail and end the block. It is built from Toggle Group and Guides, and every figure is example data.

FAQ

Does the list move when I switch?

No. Both states of each row are in the same grid cell, so the row is always as tall as the taller one. Only the visible text changes.

What is read by assistive technology?

Only the state that is showing: the other one is aria-hidden and inert. A polite status line says which state you switched to.

Can the toggle be switched off?

No. It always has one state chosen, so pressing the chosen item again changes nothing. Arrow keys and Space or Enter move between the two.

Is the toggle the same on every base?

Each base has its own Toggle Group, and the block adapts to how each one reports its value. The look is the same everywhere. On React Aria the arrow keys don't move between the two items: Tab and Space or Enter do.

What does a phone show?

The toggle takes the full width under the header and each row stacks its title above the text.

Are the figures real?

No. Sortwhistle is fictional and every figure is example data.

  • Pro

    Matched Pairs Comparison

    Comparisons

    Five pains of bank reconciliation matched row by row with their fixes, an arrow between each pair and an improvement chip on every fix.

  • Pro

    Struck Through Before After

    Comparisons

    Tabs of three workflows, each with a Before list where removed steps are struck through and an After list, a step count and one customer line.

  • Pro

    Split Layout Before After Slider Hero

    Interactive demos

    A split hero for a site speed tool: a headline, a Shine Button and a second action beside a speed report that fills its cell edge to edge, before on one side of a handle and after on the other.

  • Pro

    Before After Toggle Features

    Live controls

    A Before and After control that cross-fades a settings screen between a cluttered version (warning banners, a nested menu, badges everywhere) and a clean one, in a frame that never changes height.

  • Pro

    Topic Select FAQ

    Topics and filters

    A short FAQ for a bike-share with a topic Select at the end of its header: choose a topic and its questions fill the rows below, or choose All topics for all twelve.

  • Pro

    Drawn Bento Use Cases

    Customers

    A bento of four use cases in shared hairlines, each with a small greyscale drawing of its screen, a badge, a title, one line and a metric.

All 150 about blocks