Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/klovaaxel/combobox-framework
A framework for building comboboxes
https://github.com/klovaaxel/combobox-framework
accessibility al11y aria autocomplete combobox wcag web-component
Last synced: 4 months ago
JSON representation
A framework for building comboboxes
- Host: GitHub
- URL: https://github.com/klovaaxel/combobox-framework
- Owner: klovaaxel
- License: mit
- Created: 2024-01-27T12:05:33.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-25T20:10:14.000Z (4 months ago)
- Last Synced: 2024-10-01T02:42:34.032Z (4 months ago)
- Topics: accessibility, al11y, aria, autocomplete, combobox, wcag, web-component
- Language: HTML
- Homepage: https://klovaaxel.github.io/combobox-framework/
- Size: 262 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Combobox Framework
An adaptable framework to build accessible comboboxes.
Built as a web component, it can be used in any framework or vanilla HTML/CSS/JS.
[Installation](https://klovaaxel.github.io/combobox-framework/#installation) [Examples](https://klovaaxel.github.io/combobox-framework/#examples) [Styling](https://klovaaxel.github.io/combobox-framework/#styling) [GitHub](https://klovaaxel.github.io/combobox-framework/) [NPM](https://www.npmjs.com/package/combobox-framework) [WebComponents](https://www.webcomponents.org/element/combobox-framework)
## Features
- 🌟 Accessible! Built to follow the [WAI-ARIA combobox design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/). Built for keyboard navigation, screen readers, and other assistive technologies.
- 🎨 Easy to style! Bind your own elements to the framework slots, and style them however you want. Easy to integrate into any design system.
## Installation
### CDN
Link in the combobox-framework from a CDN
```html
```
### NPM
Install the combobox-framework from npm
```bash
npm install combobox-framework
```
Import the combobox-framework into your project
```js
import "combobox-framework";
```
## Usage / Examples
### Sample HTML
This is a simple example of how to use the combobox framework element. For more examples, see the [demo](https://klovaaxel.github.io/combobox-framework/)
```html
- Item 1
- Item 2
- Item 3
- Item 4
```
### Sample CSS
This is what is used to style the combobox in the [demo](https://klovaaxel.github.io/combobox-framework/). You can style it however you want.
```css
combobox-framework [slot="list"] {
color: black;
background-color: white;
position: absolute;
top: anchor(bottom);
left: anchor(left);
right: anchor(right);
list-style: none;
margin: 0;
padding: 0;
border: 1px solid black;
border-radius: 0 0 0.2rem 0.2rem;
}
combobox-framework [slot="list"] > * {
padding: 0.2rem;
cursor: pointer;
}
combobox-framework [slot="list"] li:hover,
combobox-framework [slot="list"] tr:hover td {
background-color: azure;
}
```
## Development notes
### Setup
Install [Bun](https://bun.sh/), then run:
```bash
bun install
```
## Dev server
```bash
bun run dev
```
## Build
```bash
bun run build
```
## Resources
- [Combobox Pattern - ARIA Authoring Practices Guide (APG)](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#top)