Forms

Checkbox

@xui/checkbox

A tri-state checkbox. It is a ControlValueAccessor, so ngModel and reactive forms bind straight to it, and indeterminate renders the mixed state a parent checkbox needs.

Install

pnpm add @xui/checkbox

Add the barrel to a standalone component's imports:

import { XuiCheckboxImports } from '@xui/checkbox';

@Component({
  imports: [XuiCheckboxImports],
  // …
})

Examples

Default

Loading preview…

<div class="flex flex-col gap-2">
  <xui-checkbox label="Unchecked" color="primary" size="md" />
  <xui-checkbox [indeterminate]="true" label="Indeterminate" color="primary" size="md" />
  <xui-checkbox [checked]="true" label="Checked" color="primary" size="md" />
  <xui-checkbox disabled label="Unchecked Disabled" color="primary" size="md" />
  <xui-checkbox [indeterminate]="true" disabled label="Indeterminate Disabled" color="primary" size="md" />
  <xui-checkbox [checked]="true" disabled label="Checked Disabled" color="primary" size="md" />
</div>

With label

Loading preview…

<div class="flex flex-col gap-2">
  <xui-checkbox label="Plain string label" />
  <xui-checkbox>Projected <b>rich</b> content</xui-checkbox>
  <xui-checkbox large label="Large" />
</div>

Layout

Loading preview…

<div class="w-64">
  <xui-checkbox alignIndicator="end" label="Indicator at the end" />
</div>

<div class="mt-4">
  <xui-checkbox inline [checked]="true" label="Comfortable" />
  <xui-checkbox inline label="Cozy" />
  <xui-checkbox inline label="Compact" />
</div>

Colors

Loading preview…

<div class="flex gap-2">
  <xui-checkbox [checked]="true" color="primary" aria-label="primary checked"  />
  <xui-checkbox [checked]="true" color="secondary" aria-label="secondary checked"  />
  <xui-checkbox [checked]="true" color="success" aria-label="success checked"  />
  <xui-checkbox [checked]="true" color="error" aria-label="error checked"  />
  <xui-checkbox [checked]="true" color="warning" aria-label="warning checked"  />
  <xui-checkbox [checked]="true" color="info" aria-label="info checked"  />
</div>

<div class="flex gap-2 mt-2">
  <xui-checkbox [indeterminate]="true" color="primary" aria-label="primary indeterminate"  />
  <xui-checkbox [indeterminate]="true" color="secondary" aria-label="secondary indeterminate"  />
  <xui-checkbox [indeterminate]="true" color="success" aria-label="success indeterminate"  />
  <xui-checkbox [indeterminate]="true" color="error" aria-label="error indeterminate"  />
  <xui-checkbox [indeterminate]="true" color="warning" aria-label="warning indeterminate"  />
  <xui-checkbox [indeterminate]="true" color="info" aria-label="info indeterminate"  />
</div>

<div class="flex gap-2 mt-2">
  <xui-checkbox disabled [checked]="true" color="primary" aria-label="primary disabled checked"  />
  <xui-checkbox disabled [checked]="true" color="secondary" aria-label="secondary disabled checked"  />
  <xui-checkbox disabled [checked]="true" color="success" aria-label="success disabled checked"  />
  <xui-checkbox disabled [checked]="true" color="error" aria-label="error disabled checked"  />
  <xui-checkbox disabled [checked]="true" color="warning" aria-label="warning disabled checked"  />
  <xui-checkbox disabled [checked]="true" color="info" aria-label="info disabled checked"  />
</div>

<div class="flex gap-2 mt-2">
  <xui-checkbox disabled color="primary" aria-label="primary disabled"  />
  <xui-checkbox disabled color="secondary" aria-label="secondary disabled"  />
  <xui-checkbox disabled color="success" aria-label="success disabled"  />
  <xui-checkbox disabled color="error" aria-label="error disabled"  />
  <xui-checkbox disabled color="warning" aria-label="warning disabled"  />
  <xui-checkbox disabled color="info" aria-label="info disabled"  />
</div>

API

XuiCheckbox

component

xui-checkbox

A checkbox with its label, wired for forms.

Variants

Axis

Options

Default

color

primary

secondary

success

error

info

warning

primary

inline

false

true

false

alignIndicator

start

end

start

disabled

true

false

false

Inputs

Name

Type

Default

class

ClassValueClasses for the box itself, not the control as a whole — a width here reshapes the box rather than the row. The host is display: contents, so to size or space the whole control (which is what alignIndicator="end" needs something to push against) put the class on a wrapper.

''

color

XuiCheckboxVariants['color']Intent colour of the checked box.

this.config.color

size

XuiCheckboxVariants['size']Box size, from the shared control scale. large overrides the tick's own size.

this.config.size

label

stringA plain-text label rendered beside the box, as an alternative to projection.

''

alignIndicator

XuiCheckboxAlignIndicatorWhich side the box sits on relative to the label.

'start'

inline

booleanLay the control out inline so several sit on one line, rather than stacked.

false

large

booleanRender a larger box and label.

false

id

string | nullUsed to set the id on the underlying xLabel element.

null

ariaLabel

string | nullUsed to set the aria-label attribute on the underlying xLabel element.

null

ariaLabelledby

string | nullUsed to set the aria-labelledby attribute on the underlying xLabel element.

null

ariaDescribedby

string | nullUsed to set the aria-describedby attribute on the underlying xLabel element.

null

checked

two-way

booleanThe checked state of the checkbox. Two-way bindable; emits checkedChange.

false

indeterminate

two-way

booleanThe indeterminate state of the checkbox. For example, a "select all/deselect all" checkbox may be in the indeterminate state when some but not all of its sub-controls are checked.

false

name

string | nullThe name attribute of the checkbox.

null

required

booleanWhether the checkbox is required.

false

disabled

booleanWhether the checkbox is disabled.

false

Source

libs/ui/checkbox/xui