<h2>When to use</h2>
<p>Switches help users choose between two mutually exclusive options. They can replace two radio buttons or a single checkbox when there is a default setting and an immediate change in the state or functionality is desired. </p>
<p>If there is no default or if the change requires a confirmation, consider using a radio button or checkbox instead. The switch component is used mostly commonly with system settings and preferences and not used in forms where checkboxes and radio buttons are commonly found.</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>
<details data-name='image-block' data-images='[{"alt":"Anatomy of a switch.","caption":"A switch is made of the following three elements:\n\n1. **Label:** describes the setting or functionality that the switch controls.\n2. **Control:** shows whether the control is on or off.\n3. **Control label:** dynamically updates to state the intended behavior of the switch.","url":"https://dds.dell.com/site/production/a6/27/1_Anatomy_0a31479df5.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/production/6d/5e/2_Selection_Control_5f7c59de2f.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/production/93/34/3_1_Nested_groups_3eb740899d.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/production/44/26/3_2_Nested_groups_6b1e0b4758.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. 

If the parent is enabled, the children are visible and can be set according to user preference. Deselecting the parent switch hides the nested controls, causing the undisclosed controls to behave as though they are off. 

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/production/61/03/3_1_Sizes_19c9f01c98.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/production/e6/e9/3_2_Sizes_5629cacec0.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/production/c4/95/4_1_Large_Vertical_e282dd2079.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/production/27/b7/4_2_Large_Nested_3d3394dd02.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/production/62/49/4_3_Small_Vertical_ea1d028ec7.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/production/47/ae/4_4_Small_Nested_040a3b6673.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

## Interaction

### Behaviors

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/production/33/33/5_Behaviors_6440c05a0f.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

#### States

<details data-name='image-block' data-images='[{"alt":"The five states of a switch.","caption":"","url":"https://dds.dell.com/site/production/d7/8c/6_States_b048b53358.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



To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/index.html?path=/docs/components-switch--basic).

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-switch--basic&viewMode=docs&websiteFrame=true'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/index.html?path=/docs/components-switch--basic).

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-switch--docs&args=&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/story/components-switch--basic)

<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-switch--docs&viewMode=docs&websiteFrame=true'></details>

A switch allows users to choose between two mutually exclusive settings and is commonly used to control preferences within an application.

Switch

<p>AI Chat Toolkit has moved! You can now find it under the AI section.</p>


AI Chat Toolkit Redirect

<p>The DDS Feedback Form has been updated to point to Service Now (the new official intake form). Please <a href="/resources/videos/servicenow-overview">review this video</a> to learn more about how to interact with our team. Although the tool and process changed, our team expects to continue providing the same support as before.</p>
