Layr
⌘K
Ctrl K
Design Systems
Pro
AI Designer
Account
Roadmap
Sign in
Getting started
Salesforce Lightning
Lightning UI
Pro
Components
Accordion
Activity Timeline
Alert
App Launcher
Avatar
Avatar Group
Badges
Brand Band
Breadcrumbs
Builder Header
Button Groups
Button Icons
Buttons
Cards
Carousel
Chat
Checkbox
Checkbox Button
Checkbox Button Group
Checkbox Toggle
Color Picker
Combobox
Counter
Data Tables
Datepickers
Datetime Picker
Docked Composer
Docked Form Footer
Docked Utility Bar
Drop Zone
Dueling Picklist
Dynamic Icons
Dynamic Menu
Einstein Header
Expandable Section
Expression
Feeds
File Selector
Files
Form Element
Form Layout
Global Header
Global Navigation
Icons
Illustration
Input
List Builder
Lookups
Lookups Mobile
Map
Menus
Modals
Notifications
Page Headers
Panels
Path
Path Simple
Picklist
Pills
Popovers
Process
Progress Bar
Progress Indicator
Progress Ring
Prompt
Publishers
Radio Button Group
Radio Group
Regions
Rich Text Editor
Scoped Notifications
Scoped Tabs
Select
Setup Assistant
Slider
Spinners
Split View
Summary Detail
Tabs
Textarea
Tiles
Timepicker
Toast
Tooltips
Tree Grid
Trees
Trial Bar
Vertical Navigation
Vertical Tabs
Visual Picker
Welcome Mat
<ul> <li>Exists without other multi-select elements (i.e. checkboxes)</li> <li>Allows users to select multiple entities</li> <li>Semantically fits the add/remove model</li> </ul> <!-- Structure and Implementation --> <h2>Structure and Implementation</h2> <div class="code-example"> <p>The checkbox <code><input></code> is visually hidden with <code>.slds-assistive-text</code> and a faux checkbox is created using the icon blueprint which allows the display of an icon instead of the standard checkbox.</p> <p>Click and tap events are captured by a <code><label></code> that encases the entire blueprint. The <code>for</code> attribute of your <code><label></code> must match the <code>id</code> attribute of your <code><input></code>.</p> <p>The states of the checkbox button are styled with the following classes:</p> <table class="state-table"> <thead> <tr> <th>Class</th> <th>State</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>.slds-checkbox-button_is-checked</code></td> <td>checked</td> <td>The checked state when the checkbox button has been selected</td> </tr> <tr> <td><code>.slds-checkbox-button_is-disabled</code></td> <td>disabled</td> <td>The disabled state when the checkbox button has been disabled</td> </tr> <tr> <td><code>.slds-checkbox-button_is-focused</code></td> <td>focused</td> <td>The focused state when the checkbox button has focus; important for accessibility</td> </tr> </tbody> </table> <p>When implementing this blueprint, monitor the state of the checkbox <code><input></code> and apply the appropriate state class listed in the above chart based on the current state of the checkbox <code><input></code>.</p> <p>It is possible to change the icon used within the checkbox button, see Different Icons for more details.</p> </div> <!-- Mobile --> <div class="mobile-notice"> <h3>Mobile</h3> <p>Checkbox buttons will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor.</p> </div> <!-- Base --> <h2>Base</h2> <div class="demo-section"> <h3>Basic Checkbox Button</h3> <span class="slds-checkbox-button"> <input type="checkbox" name="options" id="checkbox-button-base" value="base" /> <label class="slds-checkbox-button__label" for="checkbox-button-base"> <span class="slds-checkbox-faux"> <svg class="slds-icon slds-icon_x-small" aria-hidden="true"> <use xlink:href="#utility-add"></use> </svg> </span> <span class="slds-form-element__label">Add Item</span> </label> </span> </div> <!-- States --> <h2>States</h2> <!-- Checked --> <div class="demo-section"> <h3>Checked</h3> <span class="slds-checkbox-button slds-checkbox-button_is-checked"> <input type="checkbox" name="options" id="checkbox-button-checked" value="checked" checked /> <label class="slds-checkbox-button__label" for="checkbox-button-checked"> <span class="slds-checkbox-faux"> <svg class="slds-icon slds-icon_x-small" aria-hidden="true"> <use xlink:href="#utility-check"></use> </svg> </span> <span class="slds-form-element__label">Added to Cart</span> </label> </span> </div> <!-- Disabled --> <div class="demo-section"> <h3>Disabled</h3> <span class="slds-checkbox-button slds-checkbox-button_is-disabled"> <input type="checkbox" name="options" id="checkbox-button-disabled" value="disabled" disabled /> <label class="slds-checkbox-button__label" for="checkbox-button-disabled"> <span class="slds-checkbox-faux"> <svg class="slds-icon slds-icon_x-small" aria-hidden="true"> <use xlink:href="#utility-add"></use> </svg> </span> <span class="slds-form-element__label">Unavailable</span> </label> </span> </div> <!-- Checked and Disabled --> <div class="demo-section"> <h3>Checked and Disabled</h3> <span class="slds-checkbox-button slds-checkbox-button_is-checked slds-checkbox-button_is-disabled"> <input type="checkbox" name="options" id="checkbox-button-checked-disabled" value="checked-disabled" checked disabled /> <label class="slds-checkbox-button__label" for="checkbox-button-checked-disabled"> <span class="slds-checkbox-faux"> <svg class="slds-icon slds-icon_x-small" aria-hidden="true"> <use xlink:href="#utility-check"></use> </svg> </span> <span class="slds-form-element__label">Already Added</span> </label> </span> </div> <!-- Examples --> <h2>Examples</h2> <!-- Different Icon --> <div class="demo-section"> <h3>Different Icon</h3> <p>You may change the utility icon used by the checkbox button depending on the action you are communicating. Reference the utility icon listing for all available options.</p> <p>This example is using the <code>recycle_bin_empty</code> utility icon as its base state and the <code>recycle_bin_full</code> utility icon as its checked state.</p> <div class="checkbox-demo-grid"> <div class="checkbox-demo-item"> <h4>Unchecked State</h4> <span class="slds-checkbox-button"> <input type="checkbox" name="recycle" id="checkbox-button-recycle-empty" value="recycle-empty" /> <label class="slds-checkbox-button__label" for="checkbox-button-recycle-empty"> <span class="slds-checkbox-faux"> <svg class="slds-icon slds-icon_x-small" aria-hidden="true"> <use xlink:href="#utility-delete"></use> </svg> </span> <span class="slds-form-element__label">Delete Item</span> </label> </span> </div> <div class="checkbox-demo-item"> <h4>Checked State</h4> <span class="slds-checkbox-button slds-checkbox-button_is-checked"> <input type="checkbox" name="recycle" id="checkbox-button-recycle-full" value="recycle-full" checked /> <label class="slds-checkbox-button__label" for="checkbox-button-recycle-full"> <span class="slds-checkbox-faux"> <svg class="slds-icon slds-icon_x-small" aria-hidden="true"> <use xlink:href="#utility-delete"></use> </svg> </span> <span class="slds-form-element__label">Item Deleted</span> </label> </span> </div> </div> </div> <!-- Multiple Checkbox Buttons --> <div class="demo-section"> <h3>Multiple Checkbox Buttons</h3> <p>Example of multiple checkbox buttons working together in a group:</p> <div class="checkbox-demo-grid"> <div class="checkbox-demo-item"> <span class="slds-checkbox-button"> <input type="checkbox" name="products" id="checkbox-button-product1" value="product1" /> <label class="slds-checkbox-button__label" for="checkbox-button-product1"> <span class="slds-checkbox-faux"> <svg class="slds-icon slds-icon_x-small" aria-hidden="true"> <use xlink:href="#utility-add"></use> </svg> </span> <span class="slds-form-element__label">Product A</span> </label> </span> </div> <div class="checkbox-demo-item"> <span class="slds-checkbox-button"> <input type="checkbox" name="products" id="checkbox-button-product </div> </div> </div> </div> </div> </div> <div class="hidden rotate-45 text-red-500 bg-red-100 dark:text-red-400 dark:bg-red-900/50 text-green-500 bg-green-100 dark:text-green-400 dark:bg-green-900/50 scheme-light scheme-dark scheme-light-dark"> </div> </main> </body> </html> <script> document.addEventListener("turbo:load", function() { var alerts = document.querySelectorAll('.alert') alerts.forEach(function(alert) { new bootstrap.Alert(alert) }) }) </script> <!--popover--> <script> document.addEventListener("DOMContentLoaded", function () { const dropdowns = document.querySelectorAll('[data-controller="dropdown-popover"]'); for (let i = 0; i < dropdowns.length; i++) { const dropdown = dropdowns[i]; const button = dropdown.querySelector('[data-dropdown-popover-target="button"]'); const menu = dropdown.querySelector('[data-dropdown-popover-target="menu"]'); if (!button || !menu) continue; let open = false; // Open menu button.addEventListener("mouseenter", () => { menu.style.opacity = "1"; menu.style.marginLeft = "-140px"; menu.style.pointerEvents = "auto"; menu.style.display = "block"; open = true; }); // Close after leaving both button and menu button.addEventListener("mouseleave", () => { setTimeout(() => { if (!menu.matches(':hover')) { menu.style.opacity = "0"; menu.style.pointerEvents = "none"; menu.style.display = "none"; open = false; } }, 100); }); // Keep open while hovering over menu menu.addEventListener("mouseenter", () => { menu.style.opacity = "1"; menu.style.marginLeft = "-140px"; menu.style.pointerEvents = "auto"; menu.style.display = "block"; }); menu.addEventListener("mouseleave", () => { menu.style.opacity = "0"; menu.style.pointerEvents = "none"; menu.style.display = "none"; open = false; }); } }); </script> <!--sendJF--> <script> document.querySelectorAll('#sendFiddle').forEach((btn, index) => { btn.addEventListener('click', () => { const iframe = document.querySelectorAll('iframe')[index]; const srcdoc = iframe?.getAttribute('srcdoc'); if (!srcdoc) { alert('iframe srcdoc not available'); return; } // Extract <style> and <script> content from srcdoc using regex const cssMatches = [...srcdoc.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/gi)]; const jsMatches = [...srcdoc.matchAll(/<script[^>]*>([\s\S]*?)<\/script>/gi)]; const css = cssMatches.map(m => m[1]).join('\n'); const js = jsMatches.map(m => m[1]).join('\n'); // Remove <style> and <script> blocks to isolate HTML const html = srcdoc .replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '') .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '') .replace(/</g, '<') .replace(/>/g, '>') .replace(/&/g, '&'); // Create and submit form to JSFiddle const form = document.createElement('form'); form.method = 'POST'; form.action = 'https://jsfiddle.net/api/post/library/pure/'; form.target = '_blank'; const addField = (name, value) => { const input = document.createElement('input'); input.type = 'hidden'; input.name = name; input.value = value; form.appendChild(input); }; addField('html', html.trim()); addField('css', css.trim()); addField('js', js.trim()); addField('title', 'From Layr iframe srcdoc'); document.body.appendChild(form); form.submit(); document.body.removeChild(form); }); }); </script> <!--fullscreen--> <script> document.querySelectorAll('#FullscreenTab').forEach((button) => { button.addEventListener('click', function () { // Prevent duplicate fullscreen overlays if (document.getElementById('fullscreen-iframe-wrapper')) return; // Find the closest snippet container and its iframe const snippetContainer = this.closest('[data-controller="snippet"]'); const iframe = snippetContainer?.querySelector('iframe'); if (!iframe) { console.error('No iframe found for this FullscreenTab.'); return; } // Create a cloned iframe using srcdoc or fallback to content HTML const iframeClone = document.createElement('iframe'); iframeClone.className = 'w-full h-full border-0 rounded-xl bg-white dark:bg-neutral-900'; iframeClone.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-forms'); iframeClone.srcdoc = iframe.srcdoc || iframe.contentDocument?.documentElement?.outerHTML; // Create overlay const overlay = document.createElement('div'); overlay.id = 'fullscreen-iframe-wrapper'; overlay.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4'; // Create container for iframe and close button const container = document.createElement('div'); container.className = ' iframe_main_show relative w-full max-w-6xl h-[90vh] bg-white dark:bg-neutral-900 rounded-xl overflow-hidden shadow-2xl'; // Close button const closeBtn = document.createElement('button'); closeBtn.innerHTML = '×'; closeBtn.className = ` absolute top-3 right-3 text-white text-2xl font-bold bg-black/40 hover:bg-black/70 rounded-full w-10 h-10 flex items-center justify-center transition `; closeBtn.addEventListener('click', () => overlay.remove()); // Assemble container.appendChild(closeBtn); container.appendChild(iframeClone); overlay.appendChild(container); document.body.appendChild(overlay); }); }); </script> </body> </html>