Accessible Autocomplete

Question

Build an accessible autocomplete input with keyboard navigation.

Accepted Answer

import './index.css'; import React, { useState, useRef } from 'react'; const options = ['Apple', 'Banana', 'Orange', 'Grape', 'Mango']; function App() { const [query, setQuery] = useState(''); const [active, setActive] = useState(-1); const [open, setOpen] = useState(false); const ref = useRef(); const filtered = options.filter(o => o.toLowerCase().includes(query.toLowerCase())); const handleKey = e => { if (e.key === 'ArrowDown') setActive(a => Math.min(a + 1, filtered.length - 1)); else if (e.key === 'ArrowUp') setActive(a => Math.max(a - 1, 0)); else if (e.key === 'Enter' && active >= 0) { setQuery(filtered[active]); setOpen(false); } }; return (

Accessible Autocomplete

{ setQuery(e.target.value); setOpen(true); setActive(-1); }} onKeyDown={handleKey} onBlur={() => setTimeout(() => setOpen(false), 100)} aria-autocomplete='list' aria-controls='ac-list' aria-activedescendant={active >= 0 ? 'ac-' + active : undefined} ref={ref} placeholder='Type to search...' /> {open && filtered.length > 0 && ( )}

); } export default App; body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; background-color: #f5f5f5; } * { box-sizing: border-box; } .ac-demo { max-width: 400px; margin: 60px auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 16px rgba(0,0,0,0.08); padding: 32px 24px; } .ac-title { font-size: 1.5rem; font-weight: bold; margin-bottom: 1.5rem; color: #1f2937; } .ac-input { width: 100%; padding: 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 1rem; margin-bottom: 1rem; } .ac-list { list-style: none; padding: 0; margin: 0; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; position: absolute; width: 100%; z-index: 10; } .ac-item { padding: 0.7rem 1.2rem; cursor: pointer; } .ac-item.active, .ac-item:hover { background: #2563eb; color: #fff; }