basecoat/docs/src/components/checkbox.md

templateEngineOverride, layout, title, description, toc

templateEngineOverride	layout	title	description	toc
njk	layouts/page.njk	Checkbox	A control that allows the user to toggle between checked and not checked.	label id Usage usage label id Checked state checked-state label id Invalid state invalid-state label id children Examples examples label id Basic example-basic label id Description example-description label id Disabled example-disabled label id Group example-group label id Table example-table label id RTL example-rtl

{% from "macros/code_preview.njk" import code_preview %} {% from "macros/code_block.njk" import code_block %}

{% set code %}

Accept terms and conditions

{% endset %} {{ code_preview("checkbox", code) }}

Usage

Add the input class to your <input type="checkbox"> elements. Pair it with Field and a native <label> for proper layout and labeling.

{% set code %}{% endset %} {{ code_block(code) }}

Checked state

Use native HTML attributes for state. Add checked for an initially checked checkbox, or read and update the element's checked property in JavaScript.

{% set code %}{% endset %} {{ code_block(code) }}

Invalid state

Set aria-invalid="true" on the checkbox and, when using field, set data-invalid="true" on the field wrapper.

{% set code %}

Accept terms and conditions

You must accept the terms to continue.

{% endset %} {{ code_preview("checkbox-invalid", code) }}

Examples

Basic

{% set code %}

Accept terms and conditions

{% endset %} {{ code_preview("checkbox-basic", code) }}

Description

{% set code %}

Accept terms and conditions

By clicking this checkbox, you agree to the terms and conditions.

{% endset %} {{ code_preview("checkbox-description", code) }}

Disabled

{% set code %}

Accept terms and conditions

{% endset %} {{ code_preview("checkbox-disabled", code) }}

Group

{% set code %}

Sidebar

Select the items you want to display in the sidebar.

Recents

Home

Applications

Desktop

{% endset %} {{ code_preview("checkbox-group", code) }}

Table

{% set code %}

	Status	Email
	Active	olivia@example.com
	Inactive	noah@example.com

{% endset %} {{ code_preview("checkbox-table", code) }}

RTL

Checkbox layout uses document direction and logical spacing. Set dir="rtl" on a parent to render right-to-left.

{% set code %}

قبول الشروط والأحكام

يمكنك تغيير هذا الخيار في أي وقت.

{% endset %} {{ code_preview("checkbox-rtl", code) }}