Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - switch
Getting started
Twilio Paste
Paste UI
Pro
Components
Account Switcher
Ai Chat Log
Alert
Alert Dialog
Anchor
Aspect Ratio
Avatar
Badge
Blockquote
Breadcrumb
Button
Button Group
Callout
Card
Chart Provider
Chat Composer
Chat Log
Checkbox
Code Block
Combobox
Corner Ornament
Data Grid
Date Picker
Description List
Detail Text
Disclosure
Display Heading
Display Pill Group
Editable Code Block
Example Text
File Picker
File Uploader
Flex
Form Layout
Form Pill Group
Grid
Heading
Help Text
Icon
In Page Navigation
Inline Code
Input
Keyboard Key
Label
List
Media Object
Menu
Meter
Minimizable Dialog
Modal
Multiselect Combobox
Page Header
Pagination
Paragraph
Popover
Product Switcher
Progress Bar
Progress Steps
Radio Button Group
Radio Group
Screen Reader Only
Select
Separator
Side Modal
Side Panel
Sidebar
Sidebar Navigation
Skeleton Loader
Slider
Spinner
Stack
Status Badge
Status Menu
Summary Detail
Switch
Table
Tabs
Textarea
Time Picker
Timeline
Toast
Tooltip
Topbar
Truncate
User Dialog
Visual Picker
<div style="border-left: 4px solid #0263E0; padding-left: 16px; margin: 24px 0; background: #F0F6FF; padding: 16px;"> <p><em>"Users expect the same immediate results from a digital toggle as they do from their real-world counterparts (e.g., light switches). Immediate results are a facet of toggle switches that grants users the freedom and control to update their preferences as needed."</em></p> <p><strong>— Nielsen Norman Group, Toggle-Switch Guidelines</strong></p> </div> <h3>Accessibility</h3> <ul> <li>SwitchGroup <strong>must</strong> have a <code>legend</code> that describes the collection.</li> <li>Switch always has the <code>role="switch"</code> attribute.</li> <li>Switch must have a visible label that is in close proximity to the control.</li> <li>If you want to mark a Switch as required, use the <code>required</code> prop.</li> <li>When in an error state display an inline error message below the offending Switch that clearly describes the error.</li> <li>When displaying additional content based on toggling a Switch, be sure that the new content appears after the Switch in question so that it is naturally discoverable by assistive technology users.</li> </ul> <h2>Examples</h2> <h3>Default</h3> <p>A Switch is always displayed with a visible label. The <em>label text should never change</em> based on the state of the Switch.</p> <div class="example-section"> <div class="switch-container"> <label style="display: flex; align-items: center; cursor: pointer;"> <input type="checkbox" role="switch" id="default-switch" style="appearance: none; width: 44px; height: 24px; background: #8891AA; border-radius: 12px; position: relative; cursor: pointer; transition: background 0.2s; margin-right: 8px;"> <span>Enable notifications</span> </label> </div> </div> <h3>With Help Text</h3> <p>In cases where the Switch requires additional context, you can display this information as help text below the Switch and label.</p> <div class="example-section"> <div class="switch-container"> <label style="display: flex; align-items: center; cursor: pointer;"> <input type="checkbox" role="switch" id="help-switch" style="appearance: none; width: 44px; height: 24px; background: #8891AA; border-radius: 12px; position: relative; cursor: pointer; transition: background 0.2s; margin-right: 8px;"> <span>Enable notifications</span> </label> <div style="margin-top: 4px; font-size: 14px; color: #606B85;"> You will receive notifications about important updates and messages. </div> </div> </div> <h3>Required</h3> <p>When a Switch is required to be 'on', a required indicator should be displayed alongside the label.</p> <div class="example-section"> <div class="switch-container"> <label style="display: flex; align-items: center; cursor: pointer;"> <input type="checkbox" role="switch" id="required-switch" required style="appearance: none; width: 44px; height: 24px; background: #8891AA; border-radius: 12px; position: relative; cursor: pointer; transition: background 0.2s; margin-right: 8px;"> <span>Accept terms and conditions <span style="color: #D61F69;">*</span></span> </label> </div> </div> <h3>Disabled</h3> <p>Use a disabled Switch to indicate to users that it is not interactive.</p> <div class="example-section"> <div class="switch-container"> <label style="display: flex; align-items: center; opacity: 0.5;"> <input type="checkbox" role="switch" id="disabled-switch" disabled style="appearance: none; width: 44px; height: 24px; background: #8891AA; border-radius: 12px; position: relative; cursor: not-allowed; transition: background 0.2s; margin-right: 8px;"> <span>Enable notifications</span> </label> </div> </div> <h3>Switch Group</h3> <p>Multiple Switches and their labels are grouped together with a common group component.</p> <div class="example-section"> <fieldset style="border: none; padding: 0; margin: 0;"> <legend style="font-weight: 600; margin-bottom: 16px;">Notification preferences</legend> <div class="switch-container"> <label style="display: flex; align-items: center; cursor: pointer; margin-bottom: 12px;"> <input type="checkbox" role="switch" style="appearance: none; width: 44px; height: 24px; background: #8891AA; border-radius: 12px; position: relative; cursor: pointer; transition: background 0.2s; margin-right: 8px;"> <span>Email notifications</span> </label> </div> <div class="switch-container"> <label style="display: flex; align-items: center; cursor: pointer; margin-bottom: 12px;"> <input type="checkbox" role="switch" style="appearance: none; width: 44px; height: 24px; background: #8891AA; border-radius: 12px; position: relative; cursor: pointer; transition: background 0.2s; margin-right: 8px;"> <span>SMS notifications</span> </label> </div> <div class="switch-container"> <label style="display: flex; align-items: center; cursor: pointer;"> <input type="checkbox" role="switch" style="appearance: none; width: 44px; height: 24px; background: #8891AA; border-radius: 12px; position: relative; cursor: pointer; transition: background 0.2s; margin-right: 8px;"> <span>Push notifications</span> </label> </div> </fieldset> </div> <h2>States</h2> <h3>On</h3> <p>The default Switch state is off.</p> <div class="example-section"> <div class="switch-container"> <label style="display: flex; align-items: center; cursor: pointer;"> <input type="checkbox" role="switch" id="on-switch" checked style="appearance: none; width: 44px; height: 24px; background: #0263E0; border-radius: 12px; position: relative; cursor: pointer; transition: background 0.2s; margin-right: 8px;"> <span>Enable notifications</span> </label> </div> </div> <h3>Disabled On</h3> <p>Use the disabled on Switch to indicate to users that it is not interactive and cannot be turned off.</p> <div class="example-section"> <div class="switch-container"> <label style="display: flex; align-items: center; opacity: 0.5;"> <input type="checkbox" role="switch" id="disabled-on-switch" checked disabled style="appearance: none; width: 44px; height: 24px; background: #0263E0; border-radius: 12px; position: relative; cursor: not-allowed; transition: background 0.2s; margin-right: 8px;"> <span>Enable notifications</span> </label> </div> </div> <h2>Composition Notes</h2> <p>Switch label text should indicate what the Switch does when it is <strong>on</strong>, but should not describe the state itself ("enabled", "disabled"). Label text shouldn't change when the state of the Switch changes.</p> <p>Switch labels should be concise and put the most important information in the first few words. Avoid making the label a question.</p> <p>Use Help Text for additional information, like any notable implications of turning on the Switch.</p> <script> // Add interactive functionality to switches document.addEventListener('DOMContentLoaded', function() { const switches = document.querySelectorAll('input[role="switch"]:not([disabled])'); switches.forEach(switchEl => { // Create the visual switch element const switchTrack = document.createElement('div'); switchTrack.style.cssText = ` width: 44px; height: 24px; background: ${switchEl.checked ? '#0263E0' : '#8891AA'}; border-radius: 12px; position: relative; cursor: pointer; transition: background 0.2s; margin-right: 8px; `; const switchThumb = document.createElement('div'); switchThumb.style.cssText = ` width: 20px; height: 20px; background: white; border-radius: 50%; position: absolute; top: 2px; left: ${switchEl.checked ? '22px' : '2px'}; transition: left 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); `; switchTrack.appendChild(switchThumb); // Replace the input with our custom switch switchEl.style.display = 'none'; switchEl.parentNode.insertBefore(switchTrack, switchEl); // Add click handler switchTrack.addEventListener('click', function() { switchEl.checked = !switchEl.checked; switchTrack.style.background = switchEl.checked ? '#0263E0' : '#8891AA'; switchThumb.style.left = switchEl.checked ? '22px' : '2px'; // Trigger change event switchEl.dispatchEvent(new Event('change')); }); // Handle keyboard navigation switchEl.addEventListener('keydown', function(e) { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); switchTrack.click(); } }); }); }); </script> <h2 id="feedback">Feedback</h2> <p>Help us improve this component by providing feedback, asking questions on Slack, or updating this file on GitHub.</p></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">