In frontend UI interviews, the fastest way to score well is to ship a small component that works, then harden it with keyboard support, accessible semantics, responsive styling, and edge-case tests.
Use this page as a frontend UI interview practice map for a frontend UI coding interview. It keeps broad machine coding strategy out of scope and focuses on component interview questions, accessibility checks, and direct drills. If your round is a React UI coding interview, the same state, keyboard, and a11y signals still decide the score.
Most asked frontend UI interview questions and component prompts
These prompts show up because they reveal the same signals: state ownership, keyboard behavior, ARIA semantics, responsive layout, and whether you can test a component before time runs out.
Modal / Confirm Dialog
Requirement: build an accessible modal that opens, confirms, cancels, closes, and restores focus.
Test focus: accessible name, Escape, outside click policy, focus trap modal behavior.
Autocomplete
Requirement: solve the React autocomplete interview question with filtering and mouse or keyboard selection.
Test focus: debounce, loading, empty results, stale response policy.
Contact Form
Requirement: solve an accessible form validation interview prompt with fields, submit, and feedback.
Test focus: labels, required fields, disabled submit, error recovery.
Tabs
Requirement: solve the React tabs interview question by switching panels and preserving active state.
Test focus: roving tabindex, ARIA tabs linkage, Home/End keys.
Accordion
Requirement: solve the React accordion interview question with predictable expand/collapse state.
Test focus: single vs multi-open policy, button semantics, keyboard toggles.
Data Table / Pagination
Requirement: solve the React data table pagination interview question with rows and page controls.
Test focus: page bounds, derived rows, disabled controls, table semantics.
Dynamic Table
Requirement: render changing columns and rows from structured data.
Test focus: stable keys, missing values, header mapping, sort follow-up.
Nested Checkbox Tree
Requirement: solve the React nested checkbox interview question by syncing parent and child states.
Test focus: indeterminate state, DFS updates, partial selection, reset.
Nested Comments
Requirement: solve the React nested comments interview question with reply trees and one active input.
Test focus: recursion depth, active state, empty replies, stable IDs.
Star Rating
Requirement: solve the React star rating interview question with preview, select, reset, and announcements.
Test focus: hover vs committed state, keyboard input, accessible labels.
Chips Autocomplete
Requirement: add, remove, and suggest tags without duplicate chips.
Test focus: keyboard removal, duplicate prevention, suggestions, empty input.
Progress Bar
Requirement: show bounded progress and threshold states clearly.
Test focus: 0/100 bounds, ARIA progressbar, colors, reduced motion.
Worked example: Confirm Dialog
The Confirm Dialog is a useful rehearsal prompt because it touches every scoring surface: markup, state, focus, keyboard behavior, and visual polish. Practice the direct drill here: Modal: Native dialog confirm.
Clarify checklist
- Confirm the trigger, confirm action, cancel action, and close behavior.
- Ask whether outside click should close or be ignored.
- Name the accessible title and description before coding.
DOM/state model
- Track
isOpen,lastFocus, and the active confirm/cancel callbacks. - Keep the trigger button outside the dialog and restore focus after close.
- Use a small state surface before extracting helpers.
Focus and keyboard policy
- Focus restore: save the trigger before opening.
- Focus trap policy: cycle Tab and Shift+Tab inside the panel if asked.
- Escape policy: close only when the dialog is open.
A11y checks
- Use
role="dialog"or native<dialog>with an accessible name. - Connect title and description with
aria-labelledbyandaria-describedby. - Keep visible focus and respect reduced motion.
let isOpen = false;
let lastFocus = null;
function openDialog() {
lastFocus = document.activeElement;
isOpen = true;
dialog.hidden = false;
confirmButton.focus();
}
function closeDialog() {
isOpen = false;
dialog.hidden = true;
lastFocus?.focus();
}
document.addEventListener('keydown', (event) => {
if (isOpen && event.key === 'Escape') closeDialog();
});45/60-minute UI round flow
| Time | Move | Signal |
|---|---|---|
| 0-5 min | Clarify prompt, data shape, interactions, keyboard expectations, and edge cases. | You avoid hidden assumptions. |
| 5-15 min | Ship MVP markup and the smallest visible state path. | You can make progress quickly. |
| 15-30 min | Add state/interactions: open, close, select, reset, submit, or derived rows. | Your component behaves correctly. |
| 30-45 min | Harden keyboard/a11y, responsive styling, loading, empty, and error states. | You know frontend correctness is more than click demos. |
| 45-60 min | Dry run edge cases, explain trade-offs, and state what you would improve next. | You can verify and communicate under pressure. |
What interviewers score
- Component boundaries: clear props, local state, derived data, and callbacks.
- State correctness: no stale active item, invalid page, duplicate chip, or stuck loading state.
- Keyboard support: Escape, Enter, Arrow keys, Tab order, and focus restore where relevant.
- ARIA and semantics: real buttons, labels, roles, names, descriptions, and table/list structure.
- Visual polish: readable spacing, visible focus, responsive layout, and clear disabled/error states.
- Debugging: logs state changes, checks selectors, tests odd paths, and explains fixes out loud.
- Communication: names trade-offs and keeps the interviewer aware of scope decisions.
What to skip vs prioritize
| Priority | Do this | Avoid spending time on |
|---|---|---|
| Prioritize | Correct state, keyboard, a11y, empty/error/loading states, and a dry run. | Pixel-perfect mock matching before behavior works. |
| Know lightly | Animations, transitions, theme polish, and microcopy if core behavior is done. | Complex animation systems or custom design systems. |
| Skip unless asked | Heavy abstractions, virtualized rendering, portals, and generic component libraries. | Reusable architecture that slows down the prompt. |
Choose your next practice format
FAQ
What are the most common frontend UI interview questions?
Common frontend UI interview questions include modal dialogs, autocomplete, tabs, accordion, data tables, nested checkboxes, forms, star rating, and nested comments.
How do I practice frontend UI coding interview questions?
Practice one component at a time under 45 to 60 minutes. Ship the MVP first, then add keyboard support, ARIA semantics, responsive styling, edge cases, and a short trade-off explanation.
Which React UI component questions should I practice?
Start with autocomplete, tabs, accordion, data table pagination, nested checkbox tree, nested comments, star rating, chips autocomplete, and progress bar drills.
How do interviewers score accessibility and keyboard support?
Accessibility is core correctness. Interviewers expect labels, semantic controls, focus management, keyboard paths, visible focus, and clear disabled or error states.
Is this different from frontend machine coding interviews?
It overlaps with frontend machine coding interviews, but this page narrows the scope to UI component execution. Broader machine coding rounds can also include data fetching, routing, app state, and larger product workflows.