Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

FAQ blocks

Pro

Refund Ladder FAQ Block for React Aria

A tour operator's FAQ with a refund ladder in a card: a Slider over days before departure marks the step you are on, full refund, credit or none, beside seven questions about booking and baggage.

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

An FAQ for React with React Aria. At the top, the title and a sentence sit at the start and a card sits at the end: a Slider over "days before departure" drives a three-step refund ladder, full refund, credit or no refund, and the step you're on is marked with a check while the others stay in view. The terms are labelled as examples. Seven questions about booking, baggage and groups follow in hairline rows, each with an arrow that turns when it opens. On a phone the card sits under the header and the ladder shows the details of the step you are on. It's built from Slider, Accordion and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For tour operators, airlines and venues whose refunds depend on how far ahead you cancel.

FAQ

How do I change the terms?

Edit FULL_FROM and CREDIT_FROM at the top of the file: the number of days from which a booking is refunded in full, and from which it becomes credit. STEPS holds the words of each step, and its day ranges are built from those two numbers, as is the first answer, so nothing drifts. MAX_DAYS is the end of the Slider and FIRST_DAYS where it starts.

How does the Slider work?

It's our Slider with one thumb, one day a step, and a foreground-coloured track so the page's one primary colour stays on a call to action elsewhere. Drag it or use the arrow keys, Page Up and Page Down for bigger jumps, and Home and End for the ends. The days read out beside its label, and the ladder updates at once.

What do screen readers hear?

The thumb is named "Days to departure" and its value text is a full sentence, "30 days before departure: credit.", so each move reads out where you landed. The ladder is an ordered list with the current step marked aria-current="step", and the status dots are decoration.

Are the closed answers in the page's markup?

Yes. React Aria keeps every closed panel in the markup as hidden="until-found", and the browser's find in page opens the answer that holds a match. The ladder and Slider are state, so only the questions are in the markup.

Can I move between questions with the keyboard?

Tab moves from the Slider to the first question and on down the rows; Enter or Space opens one. Tab moves from question to question.

Are these real refund terms?

No. The percentages, days and fees are examples for the page to show how the ladder works, and the card says so. Put your own terms in STEPS and the questions, and have them checked against what you actually promise customers.

All 100 faq blocks