Checkbox

Chart
Combobox

Checkbox

By clicking this checkbox, you agree to the terms.

Usage

Include CSS

Import Tailwind and one full Basecoat style bundle.

@import "tailwindcss";
@import "basecoat-css/vega.css";

Or import only the base CSS, Checkbox component CSS, and one style pack.

@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/components/checkbox.css";
@import "basecoat-css/styles/vega.css";

Using CDN or bundler imports? See the Installation page.

Add your checkbox HTML

Add class="input" to checkbox inputs. Pair it with Field and a native <label> for layout and labeling.

<input type="checkbox" class="input" />

Examples

Basic

Pair the checkbox with field and a native <label> for proper layout and labeling.

Description

Use a section and paragraph for helper text.

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

Disabled

Use the disabled attribute to prevent interaction and add data-disabled to the .field component for disabled styles.

Invalid

Set aria-invalid="true" on the checkbox and data-invalid on the field wrapper to show invalid styles.

Group

Use multiple fields to create a checkbox list.

Show these items on the desktop:

Select the items you want to show on the desktop.

Table

NameEmailRole
Sarah Chensarah.chen@example.comAdmin
Marcus Rodriguezmarcus.rodriguez@example.comUser
Priya Patelpriya.patel@example.comUser
David Kimdavid.kim@example.comEditor

RTL

Add dir="rtl" to the field group or an ancestor.

بالنقر على هذا المربع، فإنك توافق على الشروط.