This webcomponent follows the open-wc recommendations.

Enable webcomponents are very opinionated components for a reason. They were developed for 2 reasons:

1. To be accessible
2. To help developers learn how to code with accessibility in mind.

It's important to match the example implementations and only deviate when the component allows it. If you don't follow the examples, there's a good chance it won't work :)

npm i enable-wc-combobox

Note - You must be using a local server that can resolve node_modules internally. We recommend using web-dev-server (https://modern-web.dev/docs/dev-server/overview/) which has a flag --node-resolve that will resolve the imports automatically. When you're ready to deply to production, you can bundle it with the project compiler.

<enable-combobox instructions-id="fruit__desc">
    <label id="fruit__label" for="fruit" class="combobox-label">
        Enter a Fruit or Vegetable
    </label>
    <input id="fruit" name="fruit" type="text" list="fruits" aria-describedby="fruit__desc">
    <div class="sr-only" id="fruit__desc">
        As you type, use the up and down arrow keys to choose the autocomplete
        items.
    </div>
     
    <datalist id="fruits">
        <option id="Apple" value="Apple">Apple</option>
        <option id="Artichoke" value="Artichoke">Artichoke</option>
        <option id="Asparagus" value="Asparagus">Asparagus</option>
        <option id="Banana" value="Banana">Banana</option>
        <option id="Beets" value="Beets">Beets</option>
        <option id="Bell-pepper" value="Bell pepper">Bell pepper</option>
        <option id="Broccoli" value="Broccoli">Broccoli</option>
        <option id="Brussels-sprout" value="Brussels sprout">
          Brussels sprout
        </option>
        <option id="Cabbage" value="Cabbage">Cabbage</option>
        <option id="Carrot" value="Carrot">Carrot</option>
        <option id="Cauliflower" value="Cauliflower">Cauliflower</option>
        <option id="Celery" value="Celery">Celery</option>
        <option id="Chard" value="Chard">Chard</option>
        <option id="Chicory" value="Chicory">Chicory</option>
        <option id="Corn" value="Corn">Corn</option>
        <option id="Cucumber" value="Cucumber">Cucumber</option>
        <option id="Daikon" value="Daikon">Daikon</option>
        <option id="Date" value="Date">Date</option>
        <option id="Edamame" value="Edamame">Edamame</option>
        <option id="Eggplant" value="Eggplant">Eggplant</option>
        <option id="Elderberry" value="Elderberry">Elderberry</option>
        <option id="Fennel" value="Fennel">Fennel</option>
        <option id="Fig" value="Fig">Fig</option>
        <option id="Garlic" value="Garlic">Garlic</option>
        <option id="Grape" value="Grape">Grape</option>
        <option id="Honeydew-melon" value="Honeydew melon">
          Honeydew melon
        </option>
        <option id="Iceberg-lettuce" value="Iceberg lettuce">
          Iceberg lettuce
        </option>
        <option id="Jerusalem-artichoke" value="Jerusalem artichoke">
          Jerusalem artichoke
        </option>
        <option id="Kale" value="Kale">Kale</option>
        <option id="Kiwi" value="Kiwi">Kiwi</option>
        <option id="Leek" value="Leek">Leek</option>
        <option id="Lemon" value="Lemon">Lemon</option>
        <option id="Mango" value="Mango">Mango</option>
        <option id="Mangosteen" value="Mangosteen">Mangosteen</option>
        <option id="Melon" value="Melon">Melon</option>
        <option id="Mushroom" value="Mushroom">Mushroom</option>
        <option id="Nectarine" value="Nectarine">Nectarine</option>
        <option id="Okra" value="Okra">Okra</option>
        <option id="Olive" value="Olive">Olive</option>
        <option id="Onion" value="Onion">Onion</option>
        <option id="Orange" value="Orange">Orange</option>
        <option id="Parship" value="Parship">Parship</option>
        <option id="Pea" value="Pea">Pea</option>
        <option id="Pear" value="Pear">Pear</option>
        <option id="Pineapple" value="Pineapple">Pineapple</option>
        <option id="Potato" value="Potato">Potato</option>
        <option id="Pumpkin" value="Pumpkin">Pumpkin</option>
        <option id="Quince" value="Quince">Quince</option>
        <option id="Radish" value="Radish">Radish</option>
        <option id="Rhubarb" value="Rhubarb">Rhubarb</option>
        <option id="Shallot" value="Shallot">Shallot</option>
        <option id="Spinach" value="Spinach">Spinach</option>
        <option id="Squash" value="Squash">Squash</option>
        <option id="Strawberry" value="Strawberry">Strawberry</option>
        <option id="Sweet-potato" value="Sweet potato">Sweet potato</option>
        <option id="Tomato" value="Tomato">Tomato</option>
        <option id="Turnip" value="Turnip">Turnip</option>
        <option id="Ugli-fruit" value="Ugli fruit">Ugli fruit</option>
        <option id="Victoria-plum" value="Victoria plum">
          Victoria plum
        </option>
        <option id="Watercress" value="Watercress">Watercress</option>
        <option id="Watermelon" value="Watermelon">Watermelon</option>
        <option id="Yam" value="Yam">Yam</option>
        <option id="Zucchi" value="Zucchi">Zucchi</option>
    </datalist>
</enable-combobox>

<script type="module">
    import { Combobox } from '@enable-webcomponents/combobox';
</script>

These props can be added/changes on the web component. NOTE: If you're using this component in a form, the value of the selection is available on the component tag as 'value'.

instructions-id - A reference to the id of the instructions.

The components use 'parts' to style individual elements. The accordion supports the following parts:

label - The label that's associated to the the input. input - The text input for the component. clear - The clear button that appears when there are results. container - The outer