Home
Introduction
Color Library

Components

Alert
Avatar
Badge
Button
Details
Icon
Tabs
Time-ago
Tooltip
Table

Form components

Text Input
Textarea
Checkbox
Radio
Select
Form components

Checkbox

A form control for single and multiple selections.

Usage 

This is a caption
This is a caption
Agree to whatever
cancel You must agree to continue 
<div class="row">
  <ui:Checkbox label="The label" />
  <ui:Checkbox label="Checked" caption="This is a caption" checked />
</div>
<div class="row">
  <ui:Checkbox label="Disabled" caption="This is a caption" disabled />
  <ui:Checkbox label="Invalid" caption="Agree to whatever" invalid="You must agree to continue" />
</div>

Size 

This is a caption
This is a caption 
<div class="row">
  <ui:Checkbox label="Default checkbox" caption="This is a caption" />
  <ui:Button>Reference</ui:Button>
</div>
<div class="row">
  <ui:Checkbox label="Large checkbox" caption="This is a caption" size="large" />
  <ui:Button size="large">Reference</ui:Button>
</div>

With icon 

favorite
Checkbox with icon
favorite
Checkbox with icon
star
Large checkbox with icon
star
Large checkbox with icon 
<div class="row">
  <ui:Checkbox
    label="Sponsors"
    caption="Checkbox with icon"
    icon="favorite"
  />
  <ui:Checkbox
    label="Sponsors"
    caption="Checkbox with icon"
    icon="favorite"
    size="large"
  />
</div>
<div class="row">
  <ui:Checkbox
    label="Stars"
    caption="Large checkbox with icon"
    icon="star"
  />
  <ui:Checkbox
    label="Stars"
    caption="Large checkbox with icon"
    icon="star"
    size="large"
  />
</div>

Component arguments 

Checkbox 

ArgumentTypeDescription
label str Required. Label for the checkbox.
id str Optional. ID of the checkbox. Automatically generated if not set.
caption str Optional. Caption for the checkbox.
icon str Optional. Name of the Material Symbol icon to show before the checkbox.
size str Optional. Size of the checkbox. Can be "medium" or "large".
block bool Optional. If true, the checkbox will take the full width of its parent.
required bool Optional. If true, the checkbox will be marked as required.
disabled bool Optional. If true, the checkbox will be disabled.
loading bool Optional. If true, the checkbox will show a loading spinner.
valid str Optional. Positive validation message to show below the checkbox.
invalid str Optional. Negative validation message to show below the checkbox.

Components 

Component
File
Source
Checkbox
checkbox.jinja
checkbox.css
form-field.css