Winnie CSS
  1. Primitives
  2. checkbox

Checkbox

Captures binary user input. 

<label data-component="checkbox" data-selected="true">
  <button data-component="indicator">
    <i data-slot="indicator" class="check"></i>
  </button>
</label>

Import

Import just the checkbox styles.

@import "@winnie-ui/css/spatial/checkbox";
@import "@winnie-ui/css/visual/checkbox";

Anatomy

Attach the appropriate data attributes in the structure below.

<button data-component="checkbox">
  <i data-slot="indicator"></i>
</button>

Examples

Size

Use the data-size attribute to change the size.

 
<label data-component="checkbox" data-size="<size>">
  <button data-slot="indicator">
    <i data-slot="icon" class="check"></i>
  </button>
</label>

Radius

Use the data-radius attribute to change the radius.

 
<label data-component="checkbox" data-radius="<radius>">
  <button data-slot="indicator">
    <i data-slot="icon" class="check"></i>
  </button>
</label>

Color

Use the data-accent-color attribute to change the color.

 
<label data-component="checkbox" data-accent-color="<color>">
  <button data-slot="indicator">
    <i data-slot="icon" class="check"></i>
  </button>
</label>

Selected

Use the data-selected attribute to indicate that the checkbox is checked.

 
<label data-component="checkbox" data-selected="true">
  <button data-slot="indicator">
    <i data-slot="icon" class="check"></i>
  </button>
</label>

Label

Add a label with the label slot attribute as a child of the checkbox.

 
<label data-component="checkbox" data-selected="true">
  <button data-slot="indicator">
    <i data-slot="icon" class="check"></i>
  </button>
  <span data-slot="label">Pineapple</span>
</label>

Description

Add a field component with the description slot attribute as a child to add a description.

Yes, I am sure I want pineapple on my pizza 
<div data-component="field">
  <label data-component="checkbox" data-selected="true">
    <button data-slot="indicator">
      <i data-slot="icon" class="check"></i>
    </button>
    <span data-slot="label">Pineapple</span>
  </label>
  <span data-slot="description">
    Yes, I am sure I want pineapple on my pizza
  </span>
</div>

Disabled

Use the data-disabled attribute to set the disabled state of checkbox.

 
<label data-component="checkbox" data-disabled="true">
  <button data-slot="indicator"></button>
  <span data-slot="label">Pineapple</span>
</label>

Invalid

Checkbox will respect the :invalid selector when it is used in a form. Use the data-invalid attribute to manually control the invalid state of the checkbox.

 
<label data-component="checkbox" data-invalid="true">
  <button data-slot="indicator"></button>
  <span data-slot="label">Pineapple</span>
</label>

Reference

checkbox

Groups all of the parts of the checkbox together.

AttributeValue
data-accent-color"red" | "orange" | "yellow" | "green" | "blue" | "purple" | "pink" | "grey" | "brand"
data-radius"none" | "sm" | "md" | "lg" | "round"
data-size"sm" | "md" | "lg"
ModifierDescription
hoveredWhen the checkbox is hovered with a mouse
pressedWhen the checkbox is pressed with a mouse or keyboard
disabledWhen the checkbox prevents user interaction
invalidWhen the checkbox is in an invalid state in a form
selectedWhen the checkbox is selected. Otherwise known as checked.
selected-disabledWhen the checkbox is selected and disabled.
selected-disabledWhen the checkbox is selected and invalid.
Variable
--wui-checkbox-indicator-background-<?modifier>
--wui-checkbox-indicator-border-<?modifier>
--wui-checkbox-indicator-box-shadow-<?modifier>
--wui-checkbox-indicator-color-<?modifier>
--wui-checkbox-label-color-<?modifier>
--wui-checkbox-label-font-weight
--wui-checkbox-label-font-weight-with-description