Components

Checkbox

A binary choice that also supports an indeterminate state.

Usage

Basic

Email me about new releases

HTML

<bs:bsui-checkbox label="Email me about new releases" defaultChecked="true" />

Checkbox list

Each box submits under its own name, and one of them cannot be turned off.

A deploy finishes A build fails Someone mentions me Billing receipts

HTML

<bs:bsui-stack direction="column" gap="3">
  <bs:bsui-checkbox name="deploys" label="A deploy finishes" defaultChecked="true" />
  <bs:bsui-checkbox name="failures" label="A build fails" defaultChecked="true" />
  <bs:bsui-checkbox name="mentions" label="Someone mentions me" />
  <bs:bsui-checkbox name="receipts" label="Billing receipts" defaultChecked="true" disabled="true" />
</bs:bsui-stack>

Indeterminate

The parent box reports a partial selection until every scope below it agrees.

All repository scopes Read code and issues Push commits

HTML

<bs:bsui-stack direction="column" gap="3">
  <bs:bsui-checkbox label="All repository scopes" indeterminate="true" />
  <bs:bsui-checkbox name="read" label="Read code and issues" defaultChecked="true" />
  <bs:bsui-checkbox name="write" label="Push commits" />
</bs:bsui-stack>

Invalid state

A checkbox takes an error message from its field like any other control.

I agree to the terms of service Accept the terms to continue.

HTML

<bs:bsui-field invalid="true">
  <bs:bsui-checkbox name="terms" label="I agree to the terms of service" />
  <bs:bsui-field-error text="Accept the terms to continue." />
</bs:bsui-field>

Attributes

Attribute	Type	Default
`defaultChecked`	`toggle`	`false`
`indeterminate`	`toggle`	`false`
`disabled`	`toggle`	`false`
`name`	`text`	—
`value`	`text`	`on`
`label`	`richtext`	—
`bindText`	`text`	—
`nameAlt`	`text`	—
`onChange`	`text`	—
`checked`	`text`	—