Checkbox

An easily stylable checkbox component.

Enable notifications

<ui:checkbox.root>
    <ui:checkbox.control />
    <ui:checkbox.label>Enable notifications</ui:checkbox.label>
</ui:checkbox.root>

import { mount } from 'fluid-primitives';
import { Checkbox } from 'fluid-primitives/checkbox';

mount('checkbox', ({ props }) => {
	const checkbox = new Checkbox(props);
	checkbox.init();
	return checkbox;
});

Features

Tri-state support (checked, unchecked, indeterminate)
Syncs with native form elements for proper form submission
Works with Field component for form integration
Full keyboard support

Installation

typo3 ui:add checkbox

Read more about installing Components and Primitives.

Examples

Default Checked

Set the checkbox to be checked by default.

Checked by default

<ui:checkbox.root defaultChecked="{true}">
    <ui:checkbox.control />
    <ui:checkbox.label>Checked by default</ui:checkbox.label>
</ui:checkbox.root>

Indeterminate State

Use the indeterminate state for "select all" checkboxes or partial selections.

Select all (some selected)

<ui:checkbox.root defaultChecked="indeterminate">
    <ui:checkbox.control />
    <ui:checkbox.label>Select all (some selected)</ui:checkbox.label>
</ui:checkbox.root>

Disabled

Prevent interaction with the checkbox.

Disabled checkbox

<ui:checkbox.root disabled="{true}">
    <ui:checkbox.control />
    <ui:checkbox.label>Disabled checkbox</ui:checkbox.label>
</ui:checkbox.root>

Anatomy

<primitives:checkbox.root>
    <primitives:checkbox.control>
        <primitives:checkbox.indicator />
    </primitives:checkbox.control>
    <primitives:checkbox.label />
    <primitives:checkbox.hiddenInput />
</primitives:checkbox.root>