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>

Sizes

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

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

    <dap-ds-checkbox
      label="Large Option"
      value="option-2"
      size="lg"
    ></dap-ds-checkbox>
  </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="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>

Checkbox group

The checkbox component can be used in a group. The checkbox group is used to group multiple checkboxes together.

<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"
    ></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>

Importing

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

Importing React

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

Slots

No slots available.

Attributes

Property	Type	Default	Description
`name`	`string`		The name of the checkbox.
`value`	`string`		The value of the checkbox.
`checked`	`boolean`		Whether the checkbox is checked.
`indeterminate`	`boolean`	`false`	Whether the checkbox is indeterminate.
`disabled`	`boolean`		Whether the checkbox is disabled.
`required`	`boolean`		Whether the checkbox is required.
`label`	`string`		The label of the checkbox.
`description`	`string`		The description of the checkbox.
`size`	`'sm' 'md' 'lg'`		The size of the checkbox. Default is `md`. Can be `sm`, `md`, or `lg`.'
`labelPlacement`	`'left' 'right'`		The placement of the label. Can be `left` or `right`. Default is `right`.
`descriptionPlacement`	`'top' 'bottom'`		The placement of the description. Can be `top` or `bottom`. Default is `bottom`.
`ariaLabelCheckbox`	`string`		The aria label of the checkbox.
`subtle`	`boolean`		The weight of the label. Default is `false`
`feedback`	`string`		The feedback of the checkbox.
`feedbackType`	`'info' 'success' 'error'`		The feedback type of the checkbox. Can be `info`, `success`, or `error`.
`invalid`	`boolean`		The invalid state of the checkbox.
`optional`	`boolean`		The optional state of the checkbox.
`optionalLabel`	`string`		The optional label of the checkbox.
`preventDefault`	`boolean`	`false`

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.