<h2>What’s new in v3</h2>
<ul>
<li><strong>Color</strong>: The hover and active states use updated colors to reflect user interaction.</li>
<li><strong>Handle border</strong>: The handle border appears only when the switch is toggled off. When toggled on, the thumb is displayed without border.</li>
<li><strong>Design tokens</strong>: Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</li>
</ul>
<h2>When to use</h2>
<p>Switches help users choose between two mutually exclusive options. The switch component is used mostly with system settings and preferences, and not used in forms where checkboxes and radio buttons are commonly found.</p>
<p>Use a switch to:</p>
<ul>
<li>Represent mutually exclusive states such as on/off, enabled/disabled, or active/inactive</li>
<li>Apply changes that should happen immediately</li>
<li>Control system preferences or device behaviors</li>
</ul>
<p>If there is no default or if the change requires a confirmation, consider using a radio button or checkbox instead.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Switch</td>
<td>Use when there are only two mutually exclusive options for a user to choose from, and when the functionality or preference should take effect immediately without an additional submit or save action.</td>
</tr>
<tr>
<td><a href="/components/checkbox/">Checkbox</a></td>
<td>A user can select multiple options. Checking one box does not uncheck others in the same list. A single checkbox can also be used to confirm acceptance, as it allows a user to select and unselect the box before submission.</td>
</tr>
<tr>
<td><a href="/components/radio-button">Radio button</a></td>
<td>Use if the question presents a binary option that requires confirmation or additional action for the selection to take effect, or if the user must select only one option from a list of five or fewer.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>A switch is made of three elements.</p>
<details data-name='image-block' data-images='[{"alt":"Anatomy of a switch.","caption":"1. Label: describes the setting or functionality that the switch controls.\n2. Control: shows whether the control is on or off.\n3. Handle: the small circle that moves to turn the switch on or off.\n4. Control label: dynamically updates to state the intended behavior of the switch.","url":"https://dds.dell.com/site/v3/components/switch/switch-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Review guidelines","path":"https://www.nngroup.com/articles/toggle-switch-guidelines/","type":"External"},"title":"Toggle-switch guidelines","description":"Read best practices article from Nielson Normal Group on toggle-switch components","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

### Selection control

Switches are commonly used for preferences, including system functionality and settings. 

A switch’s label indicates to the user what preference, notification, or feature they are activating or deactivating. The label for the switch should remain static.

Interacting with the switch should cause the setting to take effect immediately as described by the label, and the control label should update to reflect the change . 

<details data-name='image-block' data-images='[{"alt":"Collect data switch updates its control label to on when toggled on.","caption":"When toggled, the switch’s control label updates to reflect whether the setting is enabled or not.","url":"https://dds.dell.com/site/v3/components/switch/switch-usage-selection-control.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### Nested groups

Nested switches allows users to control a greater number of options in a single area. For example, if notification preferences are included in an application’s account settings, a user will see all of their options in one place. 

Using progressive disclosure allows for parent controls to activate or deactivate a group, reducing the amount of choice on a page. However, the nested items can also act individually as further refinements of the parent.

<details data-name='image-block' data-images='[{"alt":"Example of the parent switch toggled off.","caption":"When notifications are off, related child switches are not shown.","url":"https://dds.dell.com/site/v3/components/switch/switch-usage-child-switches-off.png"},{"alt":"Example of the parent switch toggled on, with child switches now available.","caption":"When on, related child switches are available to further refine notification settings.","url":"https://dds.dell.com/site/v3/components/switch/switch-usage-child-switches-on.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>


When a switch represents a group of controls that are related, the parent switch should control the visibility of the settings of any nested controls.

Enabling the parent switch reveals nested options. Turning it off hides these options and deactivates their settings. 

Turning the parent control back on would cause the nested items to be visible once more, with the user’s previous selections preserved. However, it would not turn on each nested switch.

If all nested switches are off, show the parent switch in the off selection as well. Turning the parent switch off overrides the settings of the nested switches without changing them to the off position.


## Sizes

Switches come in two sizes: large (default) and small. Switches should match in size and match the relative width of the experience.

Keep in mind, switches are responsive and will resize when transitioning from one breakpoint to another. Recommended breakpoint guidance for each switch size applies to all grid densities.

<details data-name='image-block' data-images='[{"alt":"Large switch size","caption":"Large switches are the default. They can be used in most cases as long as you can maintain visual balance.","url":"https://dds.dell.com/site/v3/components/switch/switch-sizes-large.png"},{"alt":"Small switch size","caption":"Small switches are used in compact areas where a default switch would not fit.","url":"https://dds.dell.com/site/v3/components/switch/switch-sizes-small.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Layout

Switches are left-aligned and typically vertically stacked when there are two or more options. Stacking switches vertically makes them easier to scan and read, especially if the label text wraps to two lines. 

It is not recommended to align multiple switches horizontally.

### Specifications

All specifications for switches are measured in pixels.

<details data-name='image-block' data-images='[{"alt":"Padding shown above and below a large switch.","caption":"A large switch includes 8 pixels of padding.","url":"https://dds.dell.com/site/v3/components/switch/switch-large-padding.png"},{"alt":"Padding shown above and below the stack of large switches.","caption":"A stack of nested, large switches with 24 pixels of padding.","url":"https://dds.dell.com/site/v3/components/switch/switch-small-stacked.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

<details data-name='image-block' data-images='[{"alt":"Padding shown above and below a small switch.","caption":"A small switch includes 8 pixels of padding.","url":"https://dds.dell.com/site/v3/components/switch/switch-small-padding.png"},{"alt":"Padding shown above and below the stack of small switches.","caption":"A stack of nested, small switches with 24 pixels of padding.","url":"https://dds.dell.com/site/v3/components/switch/switch-small-stacked.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Interaction

### Behaviors and states

The switch in its entirety–label, control, and control label–are all within the component’s touch target. Visually, only the control and control label will receive the focus state, but pressing the label will also toggle the control.

<details data-name='image-block' data-images='[{"alt":"Image showing focus state.","caption":"Focus state highlights the control only, though the label is within the component’s touch target.","url":"https://dds.dell.com/site/v3/components/switch/switch-interaction-behavior.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

A switch includes five interactive states, each providing visual feedback. These states help communicate how the component responds to rest, hover, pressed, inactive, and focused.

<details data-name='image-block' data-images='[{"alt":"The five states of a switch.","caption":"","url":"https://dds.dell.com/site/v3/components/switch/switch-interaction-states.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

| State    | Behavior                                                                                                                            |
| -------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| Rest     | The rest state is the starting or ending state, indicating the option is selected or unselected.                                    |
| Hover    | When a user hovers over a selection, a highlight appears, indicating which item is selectable.                                      |
| Pressed  | The highlighted state of touching the screen or clicking a mouse over an item, indicating the item is in the act of being selected. |
| Inactive | Inactive switches and labels are displayed with 40% opacity, indicating the option exists but is not available to the user.         |
| Focus    | A blue outline appears around the switch and its label when a user tabs or uses keyboard controls to navigate selections.           |

## Standards

### Accessibility

#### The switch label should remain constant

While the control label should change to indicate the activated or deactivated status, the label, as the component’s identifier, should always remain the same.

ARIA Authoring Practices Guide (APG): [Switch Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/)

#### [](https://www.w3.org/WAI/ARIA/apg/patterns/switch/)The touch target should comprise all switch elements

All elements that compose the switch, including the label, control, and control label, will activate or deactivate the switch when pressed.

ARIA Authoring Practices Guide (APG): [Switch Example](https://www.w3.org/WAI/ARIA/apg/patterns/switch/examples/switch/)

### Content

#### Control labels

Concisely describe the intended behavior that the switch controls. The control label updates to reflect what setting is enabled as selected by the user. Only replace the On/Off labels if there are more specific labels for the control’s behavior.

**Do:** Show/hide

**Don’t:** Wifi/No Wifi

#### Switch label

Always be clear and precise in describing what the switch turns on and off. Do not frame the label as a question. The label on the switch should not change when its state changes. If more context is needed, it should be explained in a non-label text.

**Do:** “Focused inbox" or “WiFi”

**Don’t:** “Include drafts in your inbox?”

Design

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, explaining what each token controls, where it applies, and how it can be customized.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).


| Name                                | Collection | CSS var                                        | Preview  |
| ----------------------------------- | ---------- | ---------------------------------------------- | -------- |
| spacing/md                          | Semantic   | `var(--dds-spacing-md)`                        | —        |
| color/text/secondary                | Semantic   | `var(--dds-color-text-secondary)`              | \#293B4D |
| spacing/sm                          | Semantic   | `var(--dds-spacing-sm)`                        | —        |
| switch/track/width/sm               | Component  | `var(--dds-switch-track-width-sm)`             | —        |
| switch/track/height/sm              | Component  | `var(--dds-switch-track-height-sm)`            | —        |
| border/radius/rounded               | Semantic   | `var(--dds-border-radius-rounded)`             | —        |
| switch/track/rest                   | Component  | `var(--dds-switch-track-rest)`                 | \#A4B8CD |
| border/width/xs                     | Semantic   | `var(--dds-border-width-xs)`                   | —        |
| switch/handle/size/sm               | Component  | `var(--dds-switch-handle-size-sm)`             | —        |
| color/background/SURFACE/neutral    | Semantic   | `var(--dds-color-background-surface-neutral)`  | \#FFFFFF |
| color/border/NEUTRAL/base           | Semantic   | `var(--dds-color-border-neutral-base)`         | \#1D2C3B |
| color/text/primary                  | Semantic   | `var(--dds-color-text-primary)`                | \#1D2C3B |
| switch/track/width/lg               | Component  | `var(--dds-switch-track-width-lg)`             | —        |
| switch/track/height/lg              | Component  | `var(--dds-switch-track-height-lg)`            | —        |
| switch/handle/size/lg               | Component  | `var(--dds-switch-handle-size-lg)`             | —        |
| color/background/BRAND/base-rest    | Semantic   | `var(--dds-color-background-brand-base-rest)`  | \#0672CB |
| switch/track/hover                  | Component  | `var(--dds-switch-track-hover)`                | \#839DB4 |
| color/background/BRAND/base-hover   | Semantic   | `var(--dds-color-background-brand-base-hover)` | \#0063B8 |
| switch/track/active                 | Component  | `var(--dds-switch-track-active)`               | \#40586D |
| color/background/BRAND/base-pressed | Semantic   | `var(--dds-color-background-brand-base-pressed)` | \#00468B |
| color/text/inactive                 | Semantic   | `var(--dds-color-text-inactive)`               | \#B6B6B6 |
| color/background/SURFACE/inactive   | Semantic   | `var(--dds-color-background-surface-inactive)` | \#E1E1E1 |
| color/border/INACTIVE/base          | Semantic   | `var(--dds-color-border-inactive-base)`        | \#7E7E7E |


To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-switch--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-switch--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-switch--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-switch--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-switch--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-switch--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>