This project is a Stencil.js implementation of a single-select dropdown component with keyboard navigation and optional filtering.
- Custom Dropdown Component: Renders
custom-optionelements passed via a default slot. - Keyboard Navigation: Navigate using the "Arrow Up" and "Arrow Down" keys, select with "Enter". Navigation wraps at the start and end of the list.
- Single Selection: Allows one option to be selected and highlighted.
- Optional Filtering: Includes a debounced input for filtering options.
- CSS Customization: Component appearance can be customized using CSS variables.
- Accessibility: Includes the proper ARIA roles and properties for accessibility.
npm i @arcia125/custom-dropdownThe component can be with frameworks or in vanilla HTML.
import '@arcia/custom-dropdown';
function App() {
return (
<div>
<custom-dropdown
label="Color Options"
onChangeDropdown={(event) => console.log(event.detail)}
>
<custom-option value="white">White</custom-option>
<custom-option value="white-titanium">White Titanium</custom-option>
<custom-option value="black">Black</custom-option>
<custom-option value="black-titanium">Black Titanium</custom-option>
<custom-option value="teal">Teal</custom-option>
<custom-option value="pink">Pink</custom-option>
</custom-dropdown>
</div>
);
}
export default App;<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@arcia125/custom-dropdown@0.5.0/dist/index.js"></script>
</head>
<custom-dropdown label="Color Options">
<custom-option value="white">White</custom-option>
<custom-option value="white-titanium">White Titanium</custom-option>
<custom-option value="black">Black</custom-option>
<custom-option value="black-titanium">Black Titanium</custom-option>
<custom-option value="teal">Teal</custom-option>
<custom-option value="pink">Pink</custom-option>
</custom-dropdown>
<script>
const customDropdown = document.querySelector('custom-dropdown');
customDropdown.addEventListener('changeDropdown', console.log);
</script>
</html>Flash of Unstyled Content (FOUC): Can be fixed by adding a style block in the HTML file to ensure styles load correctly before content is displayed.
<style>
:not(:defined) {
visibility: hidden;
}
</style>Add these styles to your application to enable Dark mode.
<style>
@media (prefers-color-scheme: dark) {
:root {
--custom-dropdown-background-color: #2C2C2E;
--custom-option-background-color-hover: #3A3A3C;
--custom-option-background-color-focus: #48484A;
--custom-dropdown-font-color: #F5F5F7;
}
body {
background-color: #1C1C1E;
}
}
</style>running the demo:
npm install
npm startTo build the component for production, run:
npm run buildTo run the unit tests for the components, run:
npm run testTo deploy the demo to github pages run the build and commit, then run:
npm run deploy-demoTo deploy to npm run the build and commit, then run:
npm publish