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'

Attributes

Property	Type	Description
`name`	`string`	The name of the switch.
`value`	`string`	The value of the switch.
`label`	`string`	The label of the switch.
`description`	`string`	The description of the switch.
`checked`	`boolean`	The checked state of the switch.
`size`	`'xs'`, `'sm'` , `'md'` , `'lg'`	The size of the switch.
`disabled`	`boolean`	The disabled state of the switch.
`required`	`boolean`	The required state of the switch.
`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 switch.
`feedbackType`	`'negative'`, `'positive'` , `'warning'`	The feedback type of the switch.
`optional`	`boolean`	The optional state of the switch.
`optionalLabel`	`string`	The optional label of the switch.

Slots

No slots available.

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.