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>

Type

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

It can be set with type="background" property.

<div style={{ backgroundColor: "#e9edf2", padding: "16px" }}>
  <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"
      type="background"
      ></dap-ds-switch>
    <dap-ds-switch label="Label 2"
      checked
      type="background"
    ></dap-ds-switch>
    <dap-ds-switch
      label="Label 3"
      type="background"
    ></dap-ds-switch>
  </dap-ds-input-group>
</div>

Border

The switch component can have border with border property.

<div style={{ backgroundColor: "#e9edf2", padding: "16px" }}>
  <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"
      border
      ></dap-ds-switch>
    <dap-ds-switch label="Label 2" checked border
    ></dap-ds-switch>
    <dap-ds-switch label="Label 3" border
    ></dap-ds-switch>
  </dap-ds-input-group>
</div>

Importing

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

Importing React

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

Attributes

Property	Type	Default	Description
`border`	`boolean`	`false`	This sets up border around the switch, when true.
`type`	`'normal'`, `'background'`	`'normal'`	The type of the switch
`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	Type
`dds-change`	Fired when the input value changes.	`{value: string }`
`dds-blur`	Emitted when the input loses focus.	`{void }`
`dds-focus`	Emitted when the input gains focus.	`{void }`
`dds-input`	Emitted when the input receives input.	`{value: string }`

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.

CSS Custom Properties

No CSS custom properties available.