Events

The components never mutate their own state on the application's behalf. They report what happened and wait for the new props. All events are CustomEvents and all of them bubble.

All events

Element	Event	Detail
`tuix-button`	`customClick`	None
`tuix-icon-button`	`customClick`	None
`tuix-input`	`on-change`	`{ value: string }`
`tuix-input`	`on-blur`	`{ value: string }`
`tuix-input`	`on-click`	None
`tuix-dropdown`	`select`	`{ value: string \| number \| boolean }`
`tuix-dropdown`	`input-single`	`{ value: string }`
`tuix-checkbox`	`change`	`{ value: boolean, label?: string }`
`tuix-toggle-button`	`change`	`{ value: boolean, label?: string }`
`tuix-radio-button`	`change`	`{ value: string }`
`tuix-table`	`next-page`	`{ page: number, pageSize: number }`
`tuix-table`	`previous-page`	`{ page: number, pageSize: number }`
`tuix-table`	`page-size-change`	`{ page: number, pageSize: number }`
`tuix-toast`	`on-close`	None
`tuix-modal`	`on-close`	None

Some names deliberately avoid the native one: a button fires customClick rather than click, and an input fires on-change rather than input, because both of those native events are composed and would reach the very listener the component's own event is meant for. The checkbox, the toggle and the radio group can reuse change precisely because the native change is not composed: it never leaves the shadow root it was fired in.

Composed events

Only the three tuix-table pagination events are composed, which means they are the only ones that escape a shadow root they are fired inside. Every other event bubbles through the tree it was fired in and stops at its shadow boundary.

In practice that only matters when a Tuix component sits inside another component's shadow DOM: the listener has to be inside that same shadow root.

Typed listeners

import type { CustomEventTuixDropdownSelect, CustomEventTuixInput } from 'tuix-webcomponents'
 
input.addEventListener('on-change', (event: CustomEventTuixInput) => {
    setName(event.detail.value)
})
 
dropdown.addEventListener('select', (event: CustomEventTuixDropdownSelect<string>) => {
    setCountry(event.detail.value)
})

In React

The wrappers in tuix-webcomponents/react map each event to an on* prop; the handler still receives the CustomEvent, so the payload is read the same way:

<TuixInput onChange={(event) => setName(event.detail.value)} />
<TuixButton onCustomClick={save}>Save</TuixButton>

The full prop-to-event table is in the React guide.

In Vue

Every name above binds directly with @, customClick included: Vue keeps the case of a listener name that has a capital letter in it when the tag is a custom element.

<tuix-input @on-change="onChange" @on-blur="onBlur" /> <tuix-button @customClick="save">Save</tuix-button>

See the Vue guide.

In Angular

Bind with the native event name, since Angular listens on the DOM element:

<tuix-input (on-change)="onChange($event)"></tuix-input> <tuix-button (customClick)="save()">Save</tuix-button>

See the Angular guide.