It is live: hover, focus and its own controls respond. Actions that would change data (approve, send, delete) are for your app to wire. The width is a real 390 px, 768 px or 1280 px box, shrunk to fit your screen.
<style>
.odl-settings-toggles { box-sizing: border-box; inline-size: 100%; max-inline-size: 560px; margin: 0; padding: 0; border: var(--ds-border-width-default) solid var(--ds-color-border-subtle);
border-radius: var(--ds-radius-container); background: var(--ds-color-surface-raised); color: var(--ds-color-text-primary); box-shadow: var(--ds-elevation-raised); font: var(--ds-text-body-md); text-wrap: pretty; }
.odl-settings-toggles *, .odl-settings-toggles *::before { box-sizing: border-box; }
.odl-settings-toggles legend { float: inline-start; inline-size: 100%; min-inline-size: 0; overflow-wrap: anywhere; padding: var(--ds-space-inset-lg) var(--ds-space-inset-lg) var(--ds-space-inset-sm); font: var(--ds-text-title-sm); }
.odl-settings-toggles legend + * { clear: both; }
.odl-settings-toggles label { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ds-space-inline-md); align-items: center; padding: var(--ds-space-inset-md) var(--ds-space-inset-lg);
cursor: pointer; }
.odl-settings-toggles label { border-block-start: var(--ds-border-width-default) solid var(--ds-color-border-separator); }
.odl-settings-toggles .odl-text { display: grid; gap: var(--ds-space-2); }
.odl-settings-toggles .odl-text small { color: var(--ds-color-text-secondary); font: var(--ds-text-body-sm); text-wrap: balance; }
.odl-settings-toggles .odl-text em { font-style: normal; color: var(--ds-color-text-tertiary); }
.odl-settings-toggles input { appearance: none; margin: 0; flex: none; position: relative; inline-size: calc(var(--ds-size-target-pointer) * 1.75); block-size: var(--ds-size-target-pointer);
border-radius: var(--ds-radius-full); background: var(--ds-color-border-default); cursor: pointer;
transition: background-color var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-settings-toggles input::before { content: ""; position: absolute; inset-block: var(--ds-space-2); inset-inline-start: var(--ds-space-2); aspect-ratio: 1; border-radius: var(--ds-radius-full);
background: var(--ds-color-surface-raised); box-shadow: var(--ds-elevation-raised);
transition: transform var(--ds-motion-duration-short) var(--ds-motion-easing-standard); }
.odl-settings-toggles input:checked { background: var(--ds-color-bg-action-primary); }
.odl-settings-toggles input:checked::before { transform: translateX(calc(var(--ds-size-target-pointer) * 0.75)); }
.odl-settings-toggles input:hover:not(:disabled) { filter: brightness(0.95); }
.odl-settings-toggles input:focus-visible { outline: var(--ds-focus-ring-width) solid var(--ds-color-border-focus); outline-offset: var(--ds-focus-ring-offset); }
.odl-settings-toggles input:disabled { opacity: var(--ds-opacity-disabled-container); cursor: not-allowed; }
.odl-settings-toggles label:has(input:disabled) { cursor: not-allowed; }
.odl-settings-toggles label:has(input:disabled) .odl-text > span { color: var(--ds-color-text-secondary); }
@media (prefers-reduced-motion: reduce) { .odl-settings-toggles, .odl-settings-toggles *, .odl-settings-toggles *::before { transition: none !important; animation: none !important; } }
</style>
<fieldset class="odl-settings-toggles">
<legend>Sign-in and sessions</legend>
<label><span class="odl-text"><span>Require single sign-on</span><small>Members sign in through your identity provider. Owners keep a password as a backup.</small></span>
<input type="checkbox" role="switch" checked></label>
<label><span class="odl-text"><span>Two-step sign-in for guests</span><small>Guests confirm a code from an authenticator app at each new device.</small></span>
<input type="checkbox" role="switch"></label>
<label><span class="odl-text"><span>Sign out after 12 hours idle</span><small>Applies to the web and desktop apps. <em>Set by your organization.</em></small></span>
<input type="checkbox" role="switch" checked disabled></label>
</fieldset>
Pick a start and end day from two months side by side, or one quick range such as last 7 days, then apply it to a report.
The row above a table: search, filter chips with one applied and removable, add a filter, a sort button and the number of results, wrapping cleanly on narrow screens.
Six boxes for a verification code that move to the next box as you type and fill all at once when you paste, with a resend countdown and a wrong-code error.