shadcn.io is not affiliated with official shadcn/ui
Single Question Interview Team Block for React Aria
One interview read one question at a time: the person and the title in a first column, and in the second a counter, a row of ticks, the question set large, its answer and Previous and Next buttons.
Installation
Overview
An interview section for React with React Aria, for Tamworth, a language-exchange app. The first column holds the title ("Eight questions for Noor"), a sentence and the person: an initials avatar, a name, a role and the languages she speaks. After a hairline divider the second column shows one question at a time: "Question 3 of 8" with a row of eight ticks filling as you go, the question set large, its answer in a paragraph under it, and two ghost buttons, Previous and Next question. Next wraps from the last question to the first. Every question and answer is laid out unseen in one cell, so the block never changes height, and each new question fades in; with reduced motion it simply replaces the last. It's built from Avatar, Button and Guides, with CSS transitions and your theme's tokens for every colour. The person and her answers are made up for the example.
FAQ
How do I change the questions and the person?
Edit EXCHANGES and PERSON at the top of the file. An exchange is an id, a question and an answer; the counter, the row of ticks and the title's "Eight" follow the list, so add or remove questions freely. Keep answers to two or three sentences: the block is as tall as the longest.
What does a screen reader hear when I press Next?
The question and its answer sit in a polite live region, so pressing Next reads the new question and then its answer without moving focus: the button keeps it, ready for the next press. The counter is read as one phrase ("Question 3 of 8"), and the row of ticks is decoration.
Does the block change height as I move through the questions?
No. All eight questions and answers are laid out, hidden, in the same cell as the visible one, so the cell is as tall as the longest at the current width. The hidden copies are invisible, inert and hidden from assistive technology.
What happens after the last question?
Next goes back to question 1 and Previous from question 1 goes to the last. The labels never change, so a screen reader hears the same two buttons throughout. If you would rather stop at the ends, ignore the press when the step would leave the list.