A Color Swatch lets users pick a color from a preset palette or type a custom hex value. It's a staple in design-tool and component-library interviews because it exercises controlled inputs, two-way synchronization, and input validation — all at once.
Build a <ColorSwatch> that shows a 12-color preset grid and a hex input field. Clicking a swatch selects it and fills the input. Typing in the input updates the swatch (and a live preview panel) only when the entered value is a valid 3 or 6-digit hex color. The input must allow partial typing without resetting.
The key insight is separating the committed color (drives the preview) from the draft input value (what the user is typing). These must be kept as two independent pieces of state that sync only on valid hex.