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>

API Reference

The following tables cover the available props of the Fluid Primitives. For a full list of available client side props and methods, see the Zag.js Machine API.

checkbox.root

Groups the checkbox control, label, and input into one interactive label. Renders a <label> element.

Name	Description	Required	Default
`disabled`	`boolean` Whether the checkbox is disabled. Inherited from a surrounding field when available.	No	-
`invalid`	`boolean` Whether the checkbox is invalid. Inherited from a surrounding field when available.	No	-
`required`	`boolean` Whether the checkbox is required. Inherited from a surrounding field when available.	No	-
`defaultChecked`	`mixed` The initial checked state of the checkbox when rendered. Use when you don't need to control the checked state of the checkbox.	No	false
`name`	`string` The name of the input field in the checkbox. Useful for form submission. Inherited from a surrounding field when available.	No	-
`form`	`string` The id of the form that the checkbox belongs to.	No	-
`readOnly`	`boolean` Whether the checkbox is read-only. Inherited from a surrounding field when available.	No	-
`value`	`string` The value of checkbox input. Useful for form submission.	No	1

checkbox.hiddenInput

Provides the native checkbox input for form submission and browser integration. Renders an <input> element.

checkbox.control

Displays the visual checkbox box that reflects the checked state. Renders a <div> element.

checkbox.indicator

Displays the checked or indeterminate indicator inside the control. Renders a <div> element.

checkbox.label

Displays the visible label text for the checkbox. Renders a <span> element.

Anatomy

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