tuix-checkbox

Loading the components…

States

Loading the components…

error is ignored while the box is disabled.

Loading the components…

The default slot replaces the label text. It is the right choice when the label contains a link or extra styling.

Loading the components…

Loading the components…

checkbox.addEventListener('change', (event) => {
    console.log(event.detail.value, event.detail.label)
})

Property	Attribute	Type	Default	Description
`checked`	`checked`	`boolean`	`false`	Checked state
`label`	`label`	`string`	`''`	Label text, rendered with `TextSize.FieldPlaceholder`
`labelSide`	`labelside`	`CheckboxLabelSide`	`right`	`left` or `right`
`disabled`	`disabled`	`boolean`	`false`	Blocks interaction
`error`	`error`	`boolean`	`false`	Red box and label. Ignored while disabled
`dark`	`dark`	`boolean`	`false`	Dark palette

Event	Detail	When
`change`	`{ value: boolean, label?: string }`	The user toggles the box

Typed as CustomEventTuixCheckbox with a DetailValueCheckbox payload.

Slot	Content
default	Replaces the `label` text

The whole row is a <label>, so clicking the text toggles the box.
checked is not reflected to the attribute: it is read as a property.
Like the input, the component does not own its state; checked is written back from the change handler.