shadcn.io is not affiliated with official shadcn/ui
Single Question Interview Team Block for React
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 Base UI, 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.
Related
- Pro
Rapid Fire Interview Team
Culture and valuesRapid-fire answers from five people at a meal-prep company: underline tabs, one per person, and under the chosen one a definition list of the same four questions, so you can read down one person or compare across.
- Pro
Interview Testimonials
Chats and postsA customer interview as a Q&A transcript in a split: a rail with the headline, the interviewee and a Shine Button beside five ruled exchanges, each with its answer set as a quote and a chip with the time it was said.
- Pro
Two Truths And A Lie Team
Culture and valuesA two-truths-and-a-lie quiz about one person: three statements as cells in a framed card, each with a drawn mark; pick the false one, press Check and each cell answers True or False.
- Pro
Leadership Spotlight Team
Leaders and org chartsOne leader as a split band, a large initials plate with a three-paragraph bio and three figures, over four executives in cells with overshoot, each with a one-line background and expertise chips that wrap.
- Pro
Career Path Spotlights About
Team and leadersAn employee spotlight for a film-crew planning company, with four people in a vertical tab list and the open profile as a three-step career path, three answers, and a tenure badge.
- Pro
Weekly Rhythm Team
Culture and valuesHow a week runs at a project-planner company: five day columns in one hairline band, each with a ritual, its time, who hosts it and a length in minutes that counts up once, drawn to the same scale as a short bar.