Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - checkbox
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
<h4>Accessibility</h4> <ul> <li>A checkbox must have a visible label that is in close proximity to the control</li> <li>HTML checkboxes don't natively support the <code>required</code> attribute. In cases where a checkbox is required to be checked: <ul> <li>Display a required indicator</li> <li>Ensure the label text includes wording that successfully describes the requirement to the user that they should check the box</li> </ul> </li> <li>When in an error state, display an inline error message below the checkbox or checkbox group that clearly describes the error along with an icon that depicts the severity.</li> </ul> <h2>Examples</h2> <h3>Basic checkbox with label</h3> <div class="example-section"> <div class="checkbox-example"> <input type="checkbox" id="basic-checkbox" name="basic" checked> <label for="basic-checkbox">I agree to the terms and conditions</label> </div> </div> <h3>Checkbox with help text</h3> <div class="example-section"> <div class="checkbox-example"> <input type="checkbox" id="ssl-checkbox" name="ssl"> <label for="ssl-checkbox">Enable SSL certificate validation</label> <div style="font-size: 0.875rem; color: #606B85; margin-top: 4px;"> Determines if certificate validation is performed on all Twilio originated requests </div> </div> </div> <h3>Required checkbox</h3> <div class="example-section"> <div class="checkbox-example"> <input type="checkbox" id="required-checkbox" name="delete" required> <label for="required-checkbox">Confirm this message should be deleted <span style="color: #D61F00;">*</span></label> </div> </div> <h3>Basic checkbox group</h3> <div class="example-section"> <fieldset style="border: none; padding: 0; margin: 0;"> <legend style="font-weight: 600; margin-bottom: 12px;">Select the clients you would like to test.</legend> <div class="checkbox-example"> <input type="checkbox" id="apple-mail" name="desktop" value="apple_mail"> <label for="apple-mail">Apple Mail</label> </div> <div class="checkbox-example"> <input type="checkbox" id="outlook" name="desktop" value="outlook"> <label for="outlook">Outlook</label> </div> </fieldset> </div> <h3>Checkbox group with help text</h3> <div class="example-section"> <fieldset style="border: none; padding: 0; margin: 0;"> <legend style="font-weight: 600; margin-bottom: 8px;">Which ad partners would you like to advertise on?</legend> <div style="font-size: 0.875rem; color: #606B85; margin-bottom: 16px;"> Select at least 1 ad partner to create a campaign. </div> <div class="checkbox-example"> <input type="checkbox" id="facebook" name="ad_partners" value="facebook"> <label for="facebook">Facebook</label> <div style="font-size: 0.875rem; color: #606B85; margin-top: 4px;"> Questions? <a href="http://paste.twilio.com">Click here to learn more</a>. </div> </div> <div class="checkbox-example"> <input type="checkbox" id="instagram" name="ad_partners" value="instagram"> <label for="instagram">Instagram</label> <div style="font-size: 0.875rem; color: #606B85; margin-top: 4px;"> Questions? <a href="http://paste.twilio.com">Click here to learn more</a>. </div> </div> </fieldset> </div> <h3>Checkbox with suffix</h3> <div class="example-section"> <fieldset style="border: none; padding: 0; margin: 0;"> <legend style="font-weight: 600; margin-bottom: 8px;">Call logs status</legend> <div style="font-size: 0.875rem; color: #606B85; margin-bottom: 16px;"> Select at least 1 status to view results </div> <div class="checkbox-example"> <input type="checkbox" id="busy" name="status" value="busy"> <label for="busy" style="display: flex; align-items: center; gap: 8px;"> Busy <span style="background: #14B885; color: white; padding: 2px 8px; border-radius: 12px; font-size: 0.75rem;">New</span> </label> </div> <div class="checkbox-example"> <input type="checkbox" id="canceled" name="status" value="canceled"> <label for="canceled">Canceled</label> </div> <div class="checkbox-example"> <input type="checkbox" id="completed" name="status" value="completed"> <label for="completed">Completed</label> </div> <div class="checkbox-example"> <input type="checkbox" id="queued" name="status" value="queued"> <label for="queued">Queued</label> </div> </fieldset> </div> <h3>Checkbox Disclaimer</h3> <div class="example-section"> <div class="checkbox-example"> <input type="checkbox" id="disclaimer" name="disclaimer" value="disclaimer"> <label for="disclaimer" style="font-size: 0.875rem; line-height: 1.4;"> I declare the information provided above is accurate. I acknowledge that Twilio will process the information provided above for the purpose of identity verification, and will be sharing it with my local telecomm providers or authorities where required by local law. I understand that Twilio phone numbers may be taken out of service for inaccurate or false information. </label> </div> </div> <h2>States</h2> <h3>Disabled checkbox</h3> <div class="example-section"> <div class="checkbox-example"> <input type="checkbox" id="disabled-checkbox" name="hammer" disabled checked> <label for="disabled-checkbox" style="color: #8891AA;">Can't touch this</label> </div> </div> <h3>Checkbox group with error</h3> <div class="example-section"> <fieldset style="border: none; padding: 0; margin: 0;"> <legend style="font-weight: 600; margin-bottom: 12px;">API Key Permissions</legend> <div class="checkbox-example"> <input type="checkbox" id="full-access" name="api" value="full_access"> <label for="full-access">Full access</label> </div> <div class="checkbox-example"> <input type="checkbox" id="restricted-access" name="api" value="restricted_access"> <label for="restricted-access">Restricted access</label> </div> <div style="color: #D61F00; font-size: 0.875rem; margin-top: 8px;"> Select at least one option. </div> </fieldset> </div> <h2>Do and Don't</h2> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Use checkboxes to enable multiple choice.</p> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't use checkboxes when you need to restrict selection to a single option. Use a Radio Group or Select instead.</p> </div> </div> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Save the choice the user made upon submission of the form.</p> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't save or persist a user's choice upon checking a checkbox.</p> </div> </div> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Include a visible label on every checkbox. Include a visible legend for the entire group of checkboxes.</p> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't leave floating, unlabelled checkboxes.</p> </div> </div> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Provide actionable error text explaining how to fix the error.</p> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't display system messages as error text or only what field errored.</p> </div> </div> <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> </div> <script> // Add interactivity for indeterminate state example document.addEventListener("DOMContentLoaded", function() { // Example of indeterminate state functionality const parentCheckbox = document.getElementById("select-all"); const childCheckboxes = document.querySelectorAll("input[name='items']"); if (parentCheckbox && childCheckboxes.length > 0) { function updateParentCheckbox() { const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length; if (checkedCount === 0) { parentCheckbox.checked = false; parentCheckbox.indeterminate = false; } else if (checkedCount === childCheckboxes.length) { parentCheckbox.checked = true; parentCheckbox.indeterminate = false; } else { parentCheckbox.checked = false; parentCheckbox.indeterminate = true; } } childCheckboxes.forEach(checkbox => { checkbox.addEventListener("change", updateParentCheckbox); }); parentCheckbox.addEventListener("change", function() { const shouldCheck = this.checked; childCheckboxes.forEach(checkbox => { checkbox.checked = shouldCheck; }); this.indeterminate = false; }); // Initialize state updateParentCheckbox(); } }); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">