basecoat/docs/src/components/switch.md

templateEngineOverride, layout, title, description, toc

templateEngineOverride	layout	title	description	toc
njk	layouts/page.njk	Switch	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 Choice Card example-choice-card label id Disabled example-disabled label id Invalid example-invalid label id Size example-size label id RTL example-rtl

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

{% set code %}

Airplane Mode

{% endset %} {{ code_preview("switch", code, "w-full max-w-sm") }}

Usage

Add role="switch" and the input class to a native <input type="checkbox">. Use a native <label> or aria-label for accessible naming.

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

Checked state

Use native HTML state. Add checked for an initially enabled switch, 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 switch and, when using field, set data-invalid="true" on the field wrapper.

{% set code %}

Marketing emails

Choose whether marketing emails are enabled.

{% endset %} {{ code_preview("switch-invalid-state", code, "w-full max-w-sm") }}

Examples

Basic

{% set code %}

Airplane Mode

{% endset %} {{ code_preview("switch-basic", code, "w-full max-w-sm") }}

Description

{% set code %}

Marketing emails

Receive emails about new products, features, and more.

{% endset %} {{ code_preview("switch-description", code, "w-full max-w-sm") }}

Choice Card

Wrap a .field in a native <label> when the whole card should toggle the switch.

{% set code %}

Marketing emails Receive emails about new products, features, and more.

{% endset %} {{ code_preview("switch-choice-card", code, "w-full") }}

Disabled

{% set code %}

Airplane Mode

{% endset %} {{ code_preview("switch-disabled", code, "w-full max-w-sm") }}

Invalid

{% set code %}

Marketing emails

Choose whether marketing emails are enabled.

{% endset %} {{ code_preview("switch-invalid", code, "w-full max-w-sm") }}

Size

{% set code %}

Default

Small

{% endset %} {{ code_preview("switch-size", code, "w-full max-w-sm") }}

RTL

Switch field layout uses document direction. Set dir="rtl" on a parent to render right-to-left.

{% set code %}

وضع الطيران

{% endset %} {{ code_preview("switch-rtl", code, "w-full max-w-sm") }}