Skip to main content

Components

Switch

Switch gives users a choice between two alternatives. The switch can either be turned off or on and must always be set with a default choice.

aria-label
Description

Optional aria-label

Type
string
label
Description

Switch label

Type
any
description
Description

Description for field

Type
any
value
Description

Value of the `input` element

Type
InputProps
position
Description

Position of switch

Type
FieldProps
Default
start
aria-labelledby
Type
string
NameTypeDefaultDescription
aria-labelstring-

Optional aria-label

labelany-

Switch label

descriptionany-

Description for field

valueInputProps-

Value of the `input` element

positionFieldPropsstart

Position of switch

aria-labelledbystring-

-

Usage

Examples

Grouping

Use Fieldset to group multiple Switch components together.

Right-aligned

Use position="end" to position Switch on the right side of the prompt if you need it.

HTML

The class name ds-input is added to <input> along with type="checkbox" and role="switch".

To mirror what the composite component in React does, you need to use ds-field together with a <label>.

To right-align <input>, add data-position="end" to ds-field.

CSS variables and data attributes

Switch is a composite component, so we show variables and data attributes from ds-input here.

CSS Variables
NameValue
--dsc-input-paddingvar(--ds-size-2) var(--ds-size-3)
--dsc-input-size--togglevar(--ds-size-6)
--dsc-input-sizevar(--ds-size-12)
--dsc-input-background--readonlyvar(--ds-color-neutral-surface-tinted)
--dsc-input-backgroundvar(--ds-color-neutral-surface-default)
--dsc-input-border-color--readonlyvar(--ds-color-neutral-border-subtle)
--dsc-input-border-colorvar(--ds-color-neutral-border-default)
--dsc-input-border-stylesolid
--dsc-input-border-width--togglemax(var(--ds-border-width-default),calc(var(--ds-size-1)/2))
--dsc-input-border-widthvar(--ds-border-width-default)
--dsc-input-outline-color--hovervar(--ds-color-neutral-border-default)
--dsc-input-outline-color--toggle--hovervar(--dsc-input-accent-color)
--dsc-input-outline-width--hovervar(--ds-border-width-default)
--dsc-input-outline-style--hoversolid
--dsc-input-color--readonlyvar(--ds-color-neutral-text-default)
--dsc-input-colorvar(--ds-color-neutral-text-default)
--dsc-input-stroke-colorvar(--ds-color-base-contrast-default)
--dsc-input-stroke-color--invalidvar(--ds-color-danger-base-contrast-default)
--dsc-input-stroke-width0.05em
--dsc-input-accent-colorvar(--ds-color-base-default)
--dsc-input-accent-color--invalidvar(--ds-color-danger-text-subtle)
Data Attributes
NameValue
data-widthauto
Edit this page on github.com (opens in a new tab)