DÁP Design System - Switch webcomponent

Switch

Switch is a form element that allows the user to toggle between two states. It provides a way to turn an option on or off.

Design system docs

Examples

Default switch

<dap-ds-switch label="Switch"></dap-ds-switch>

Sizes

The switch component comes in two sizes: small, and large. The default size is small.

<dap-ds-stack direction="column">
    <dap-ds-switch label="SM Switch"></dap-ds-switch>
    <dap-ds-switch label="LG Switch" size="lg"></dap-ds-switch>
  </dap-ds-stack>

Secondary text

The switch component allows for secondary text to be displayed. The secondary text can be placed above or below the switch, and aligned to the left or right.

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

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

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

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

Statuses

The switch component comes in three statuses: checked, disabled, and invalid. The default status is unchecked.

<dap-ds-stack direction="column">
    <dap-ds-switch label="Checked" checked></dap-ds-switch>
    <dap-ds-switch label="Disabled" disabled></dap-ds-switch>
    <dap-ds-switch label="Invalid" invalid feedback="Wrong option" feedbackType="negative"></dap-ds-switch>
  </dap-ds-stack>

Switch group

The switch group component allows for multiple switches to be grouped together. Like any other form element, the input group can be used in a form and it has all the form element attributes.

<dap-ds-input-group
      required
      label="Switch Group"
      description="Switch group description"
      tooltip="Tooltip"
      status="error"
      feedback="Invalid switch"
      feedbackType="negative">
      <dap-ds-switch
        label="Label 1"
        description="Secondary label"></dap-ds-switch>
      <dap-ds-switch label="Label 2" checked></dap-ds-switch>
      <dap-ds-switch label="Label 3"></dap-ds-switch>
    </dap-ds-input-group>

Importing

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

Importing React

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

Slots

No slots available.

Attributes

Property	Type	Description
`size`	`'sm' 'md' 'lg'`	The size of the switch. Default is `md`. Can be `sm`, `md`, or `lg`.
`name`	`string`	The name of the switch.
`value`	`string`	The value of the switch.
`checked`	`boolean`	The checked state of the switch.
`disabled`	`boolean`	The disabled state of the switch.
`required`	`boolean`	The required state of the switch.
`label`	`string`	The label of the switch.
`description`	`string`	The description of the switch.
`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 switch.
`feedbackType`	`'info' 'success' 'error'`	The feedback type of the switch. Can be `info`, `success`, or `error`.
`optional`	`boolean`	The optional state of the switch.
`optionalLabel`	`string`	The optional label of the switch.

Events

Event Name	Description
`dds-change`	Fired when the input value changes.
`dds-blur`	Emitted when the input loses focus.
`dds-focus`	Emitted when the input gains focus.
`dds-input`	Emitted when the input receives input.

CSS Parts

Part Name	Description
`base`	The main switch container.
`baselabel`	The main label container
`label`	The label of the switch.
`input`	The native input of the switch.
`control`	The control of the switch.
`description`	The description of the switch.