Skip to content

Commit

Permalink
Update select element docs (#49)
Browse files Browse the repository at this point in the history
* Add documentation for custom events

* Updates
  • Loading branch information
adama-schibsted authored Nov 28, 2024
1 parent 6a8a198 commit c64d2b7
Showing 1 changed file with 18 additions and 0 deletions.
18 changes: 18 additions & 0 deletions docs/components/select/elements.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,3 +68,21 @@ error.
```

<api-table type=elements component="Select" />

### Event handling
The w-select component triggers the custom `change` event, on the element level, when the dropdown select element changes value.

When using the element in Lit, you can listen to the event in the standard way:

```js
html`<w-select label="Berries" auto-focus @change=${e => handleChange(e)}>`
```

The selected dropdown value is available on the `detail` field of the event (event.detail).

To use the event in other frameworks, such as Svelte, an event handler must be added manually:
```js
selectElement.addEventListener('change', e => handleChange(e))
```

In Svelte, the element can be accessed using query selection or using bind (see [bind:this](https://svelte.dev/docs/svelte/bind#bind:this)).

0 comments on commit c64d2b7

Please sign in to comment.