DÁP Design System - Checkbox webcomponent

Checkbox

Checkbox component is a form element that allows the user to select one or more options from a list of options.

Design system docs

Examples

Default Checkbox

<dap-ds-stack direction="column">
  <dap-ds-checkbox
    value="option-1"
    label="Option 1"
  ></dap-ds-checkbox>

  <dap-ds-checkbox
    label="Option 2"
  ></dap-ds-checkbox>
  <dap-ds-stack>
    Pure css Checkbox:
    <label className="dds-choice-wrap">
      <input type="checkbox" className="dds-checkbox" />
      <div className="dds-choice-label-container">
        Pure css Option 1
      </div>
    </label>
    <label className="dds-choice-wrap">
      <input type="checkbox" className="dds-checkbox" />
      <div className="dds-choice-label-container">
        Pure css Option 2
      </div>
    </label>
  </dap-ds-stack>
</dap-ds-stack>

Sizes

The checkbox component comes in three sizes: small, and large. The default size is small.

<dap-ds-stack direction="row" spacing="1200">
<dap-ds-stack>
  <dap-ds-checkbox
    value="option-0"
    label="Xs Option"
    description="Description"
    size="xs"
  ></dap-ds-checkbox>

  <dap-ds-checkbox
    value="option-1"
    label="Small Option"
    description="Description"
    size="sm"
  ></dap-ds-checkbox>

  <dap-ds-checkbox
    label="Large Option"
    value="option-2"
    description="Description"
    size="lg"
  ></dap-ds-checkbox>
</dap-ds-stack>
<dap-ds-stack>
  <label className="dds-choice-wrap dds-choice-wrap--xs">
    <input type="checkbox" className="dds-checkbox" />
    <div className="dds-choice-label-container">
      <span className="dds-label dds-label--subtle">Pure xs Option 1</span>
      <span className="dds-typography dds-typography-description">
        Description
      </span>
    </div>
  </label>

  <label className="dds-choice-wrap dds-choice-wrap--sm">
    <input type="checkbox" className="dds-checkbox" />
    <div className="dds-choice-label-container">
      <span className="dds-label dds-label--subtle">Pure sm Option 2</span>
      <span className="dds-typography dds-typography-description">
        Description
      </span>
    </div>
  </label>

  <label className="dds-choice-wrap dds-choice-wrap--lg">
    <input type="checkbox" className="dds-checkbox" />
    <div className="dds-choice-label-container">
      <span className="dds-label dds-label--subtle">Pure lg Option 2</span>
      <span className="dds-typography dds-typography-description">
        Description
      </span>
    </div>
  </label>
</dap-ds-stack>
</dap-ds-stack>

Secondary text

The checkbox component comes with a secondary text. The secondary text is used to give more information about the checkbox.

<dap-ds-stack direction="column">
  <dap-ds-checkbox
    label="Option 1"
    value="option-1"
    description="Description bottom, aligned to the right"
  ></dap-ds-checkbox>

  <dap-ds-checkbox
    label="Option 2"
    value="option-2"
    description="Description top, aligned to the right"
    descriptionPlacement="top"
  ></dap-ds-checkbox>

  <dap-ds-checkbox
    label="Option 3"
    value="option-3"
    description="Description bottom, aligned to the left"
    labelPlacement="left"
  ></dap-ds-checkbox>

  <dap-ds-checkbox
    label="Option 4"
    value="option-4"
    description="Description top, aligned to the left"
    descriptionPlacement="top"
    labelPlacement="left"
  ></dap-ds-checkbox>
</dap-ds-stack>

Statuses

The checkbox component can have different statuses.

<dap-ds-stack direction="row" spacing="1200">
<dap-ds-stack direction="column">
  <dap-ds-checkbox
    label="Disabled"
    value="option-1"
    disabled
  ></dap-ds-checkbox>

  <dap-ds-checkbox
    label="Checked"
    value="option-2"
    checked
  ></dap-ds-checkbox>

  <dap-ds-checkbox
    label="Indeterminate"
    value="option-3"
    indeterminate
  ></dap-ds-checkbox>

  <dap-ds-checkbox
    label="Invalid"
    value="option-4"
    invalid
    feedback="You have to accept the terms and conditions"
    feedbackType="negative"
  ></dap-ds-checkbox>
</dap-ds-stack>
<dap-ds-stack direction="column">
  <label className="dds-choice-wrap dds-choice-wrap--sm">
    <input type="checkbox" className="dds-checkbox" disabled/>
    <div className="dds-choice-label-container">
      <span className="dds-label dds-label--subtle">Pure disabled</span>
    </div>
  </label>

  <label className="dds-choice-wrap dds-choice-wrap--sm">
    <input type="checkbox" className="dds-checkbox" defaultChecked/>
    <div className="dds-choice-label-container">
      <span className="dds-label dds-label--subtle">Pure checked</span>
    </div>
  </label>

  <label className="dds-choice-wrap dds-choice-wrap--sm">
    <input type="checkbox" className="dds-checkbox" indeterminate="true" defaultChecked/>
    <div className="dds-choice-label-container">
      <span className="dds-label dds-label--subtle">Pure indeterminate</span>
    </div>
  </label>

  <label className="dds-choice-wrap dds-choice-wrap--sm">
    <input type="checkbox" className="dds-checkbox dds-checkbox--invalid"/>
    <div className="dds-choice-label-container">
      <span className="dds-label dds-label--subtle">Pure invalid</span>
    </div>
  </label>
</dap-ds-stack>
</dap-ds-stack>

Checkbox group

The checkbox component can be used in a group. The checkbox group is used to group multiple checkboxes together. You can use the tooltipAriaLabel property to set the aria label for the tooltip.

<dap-ds-input-group
  required
  label="Checkbox Group"
  description="Checkbox group description"
  tooltip="Tooltip"
  tooltipAriaLabel="Information about the checkbox group"
  feedbackType="negative"
  feedback="feedback text">
  
  <dap-ds-checkbox
    label="Option 1"
    description="Option 1 description"
    value="option-1"
  ></dap-ds-checkbox>

  <dap-ds-checkbox
    label="Option 2"
    value="option-2"
  ></dap-ds-checkbox>

  <dap-ds-checkbox
    label="Option 3"
    value="option-3"
  ></dap-ds-checkbox>
</dap-ds-input-group>

Type

The checkbox component can have background. It is useful when used on a colored background.

It can be set with type="background" property. Default border can be set also with border property.

<div style={{ backgroundColor: "#e9edf2", padding: "16px" }}>
  <dap-ds-input-group
    required
    label="Checkbox Group"
    description="Checkbox group description"
    tooltip="Tooltip"
    feedbackType="negative"
    feedback="feedback text">
    
    <dap-ds-checkbox
      label="Option 1"
      description="Option 1 description"
      value="option-1"
      type="background"
    ></dap-ds-checkbox>

    <dap-ds-checkbox
      label="Option 2"
      value="option-2"
      type="background"
    ></dap-ds-checkbox>

    <dap-ds-checkbox
      label="Option 3 border"
      value="option-3"
      type="background"
      border
    ></dap-ds-checkbox>
  </dap-ds-input-group>
</div>

Border

The checkbox component can have border with border property.

<div style={{ backgroundColor: "#e9edf2", padding: "16px" }}>
  <dap-ds-input-group
    required
    label="Checkbox Group"
    description="Checkbox group description"
    tooltip="Tooltip"
    feedbackType="negative"
    feedback="feedback text">
    
    <dap-ds-checkbox
      label="Option 1"
      description="Option 1 description"
      value="option-1"
      type="background"
      border
    ></dap-ds-checkbox>

    <dap-ds-checkbox
      label="Option 2"
      value="option-2"
      border
    ></dap-ds-checkbox>

    <dap-ds-checkbox
      label="Option 3"
      value="option-3"
      border
    ></dap-ds-checkbox>
  </dap-ds-input-group>
</div>

Importing

import { DapDSCheckbox } from 'dap-design-system/dist/dds'

Importing React

import { DapDSCheckboxReact } from 'dap-design-system/dist/react'

Attributes

Property	Type	Default	Description
`indeterminate`	`boolean`	`false`	Whether the checkbox is indeterminate
`preventDefault`	`boolean`	`false`	Whether the checkbox should prevent the default action
`border`	`boolean`	`false`	This sets up border around the checkbox, when true.
`type`	`'normal'`, `'background'`	`'normal'`	The type of the checkbox
`name`	`string`		The name of the checkbox.
`value`	`string`		The value of the checkbox.
`checked`	`boolean`		Whether the checkbox is checked.
`label`	`string`		The label of the checkbox.
`description`	`string`		The description of the checkbox.
`disabled`	`boolean`		Whether the checkbox is disabled.
`required`	`boolean`		Whether the checkbox is required.
`size`	`'xs'`, `sm'` , `'md'` , `'lg'`		The size of the checkbox.
`labelPlacement`	`'left'`, `'right'`		The placement of the label.
`descriptionPlacement`	`'top'`, `'bottom'`		The placement of the description.
`subtle`	`boolean`		The weight of the label.
`feedback`	`string`		The feedback of the checkbox.
`feedbackType`	`'negative'`, `'positive'` , `'warning'`		The feedback type of the checkbox.
`invalid`	`boolean`		The invalid state of the checkbox.
`optional`	`boolean`		The optional state of the checkbox.
`optionalLabel`	`string`		The optional label of the checkbox.

Slots

No slots available.

Events

Event Name	Description
`dds-change`	Fired when the checkbox is checked or unchecked.
`dds-blur`	Emitted when the checkbox loses focus.
`dds-focus`	Emitted when the checkbox gains focus.
`dds-input`	Emitted when the checkbox receives input.

CSS Parts

Part Name	Description
`base`	The main checkbox container.
`label`	The label of the checkbox.
`input`	The input of the checkbox.
`control`	The control of the checkbox.
`icon`	The icon of the checkbox.
`label-container`	The label container of the checkbox.
`description`	The description of the checkbox.

CSS Custom Properties

Property Name	Description
`--dds-checkbox-size`	The size of the checkbox. Default is `var(--dds-spacing-500)`.
`--dds-checkbox-border-width`	The border width of the checkbox. Default is `var(--dds-border-width-large)`.
`--dds-checkbox-border-radius`	The border radius of the checkbox. Default is `var(--dds-radius-small)`.
`--dds-checkbox-border-color`	The border color of the checkbox. Default is `var(--dds-border-neutral-base)`.
`--dds-checkbox-background-color`	The background color of the checkbox. Default is `transparent`.
`--dds-checkbox-icon-color`	The color of the checkbox icon. Default is `var(--dds-button-primary-icon-enabled)`.
`--dds-checkbox-hover-border-color`	The border color when hovering over the checkbox. Default is `var(--dds-border-neutral-medium)`.
`--dds-checkbox-hover-background-color`	The background color when hovering over the checkbox. Default is `var(--dds-background-neutral-medium)`.
`--dds-checkbox-active-border-color`	The border color when the checkbox is active. Default is `var(--dds-border-neutral-strong)`.
`--dds-checkbox-active-background-color`	The background color when the checkbox is active. Default is `var(--dds-background-neutral-strong)`.
`--dds-checkbox-checked-border-color`	The border color when the checkbox is checked. Default is `var(--dds-background-brand-base-inverted)`.
`--dds-checkbox-checked-background-color`	The background color when the checkbox is checked. Default is `var(--dds-background-brand-base-inverted)`.
`--dds-checkbox-checked-hover-border-color`	The border color when hovering over a checked checkbox. Default is `var(--dds-background-brand-medium-inverted)`.
`--dds-checkbox-checked-hover-background-color`	The background color when hovering over a checked checkbox. Default is `var(--dds-background-brand-medium-inverted)`.
`--dds-checkbox-checked-active-border-color`	The border color when a checked checkbox is active. Default is `var(--dds-background-brand-strong-inverted)`.
`--dds-checkbox-checked-active-background-color`	The background color when a checked checkbox is active. Default is `var(--dds-background-brand-strong-inverted)`.
`--dds-checkbox-invalid-border-color`	The border color when the checkbox is invalid. Default is `var(--dds-border-negative-base)`.
`--dds-checkbox-invalid-background-color`	The background color when the checkbox is invalid. Default is `var(--dds-background-negative-base)`.
`--dds-checkbox-invalid-hover-border-color`	The border color when hovering over an invalid checkbox. Default is `var(--dds-border-negative-medium)`.
`--dds-checkbox-invalid-hover-background-color`	The background color when hovering over an invalid checkbox. Default is `var(--dds-background-negative-medium)`.
`--dds-checkbox-invalid-active-border-color`	The border color when an invalid checkbox is active. Default is `var(--dds-border-negative-strong)`.
`--dds-checkbox-invalid-active-background-color`	The background color when an invalid checkbox is active. Default is `var(--dds-background-negative-strong)`.
`--dds-checkbox-disabled-border-color`	The border color when the checkbox is disabled. Default is `var(--dds-button-primary-background-disabled)`.
`--dds-checkbox-disabled-background-color`	The background color when the checkbox is disabled. Default is `var(--dds-button-primary-background-disabled)`.
`--dds-checkbox-disabled-icon-color`	The color of the checkbox icon when disabled. Default is `var(--dds-button-primary-icon-disabled)`.