Katkat
Back

Build a React color multi-select dropdown UI

BrexSoftware Engineer · Technical Screen
MediumSoftware EngineerTechnical ScreenSoftware Engineering Fundamentals

Last updated

This question evaluates front-end React skills including component architecture, state management, data-driven rendering, accessibility considerations, and performance trade-offs involved in implementing a multi-select dropdown that presents selected colors' properties.

Implement a React UI that lets users multi-select colors from a dropdown and view details.

You are given a JavaScript object where each key is a color name (or id) and the value is an object of properties for that color.

Example input:

const colorsByName = {
 red: { hex: "#FF0000", rgb: "255,0,0", family: "warm", contrastOnWhite: "AA" },
 green: { hex: "#00FF00", rgb: "0,255,0", family: "cool", contrastOnWhite: "A" },
 blue: { hex: "#0000FF", rgb: "0,0,255", family: "cool", contrastOnWhite: "AAA" },
 // ... potentially many more
};

Requirements:

  1. Render a dropdown (select-like) control that, when opened, shows a list of all colors.
  2. Each color in the list is selectable (multi-select). The UI should make it clear which colors are currently selected.
  3. Show a summary near the control: X color(s) selected.
  4. Below the control, render a table showing the properties of all selected colors.
  • Each row corresponds to a selected color.
  • Columns correspond to the properties (include the color name plus each property key).
  1. Handle basic UX concerns:
  • Toggling a selected item unselects it.
  • Closing/opening the dropdown works reliably.
  • Reasonable behavior when no colors are selected.

Discuss any trade-offs you make (state shape, rendering performance with large lists, accessibility).