Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Layr - Carbon UI
Getting started
IBM Carbon
Carbon UI
Pro
Components
Accordion
Ai Label
Ai Skeleton
Breadcrumb
Button
Chat Button
Checkbox
Code Snippet
Combo Box
Content Switcher
Copy Button
Data Table
Date Picker
Dropdown
File Uploader
Form Group
Icon Button
Icon Indicator
Inline Loading
Layer
Link
List
Loading
Modal
Multi Select
Notification
Number Input
Overflow Menu
Pagination
Popover
Progress Bar
Progress Indicator
Radio Button
Search
Select
Side Panel
Skeleton Icon
Skeleton Placeholder
Skeleton Text
Skip To Content
Slider
Stack
Structured List
Tabs
Tag
Tearsheet
Text Input
Textarea
Tile
Toggle
Toggletip
Tooltip
Ui Shell
{ const { currentTarget } = event; const { detail } = event as CustomEvent; const { evt } = detail; console.log('"'"'checkbox clicked'"'"', currentTarget, evt); });</code></pre> <h2 id="cdn">CDN</h2> <p>This page uses: <code>checkbox.min.js</code> via <strong>https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/checkbox.min.js</strong> </p> <h2 id="feedback">Feedback</h2> <p>Help us improve this component by providing feedback, asking questions on Slack, or updating this file on <a href="https://github.com/carbon-design-system/carbon/edit/main/packages/web-components/src/components/checkbox/checkbox.mdx" target="_blank">GitHub</a> </p> <!-- Interactive JavaScript --> <script> // Event listener for checkbox changes document.addEventListener('"'"'cds-checkbox-changed'"'"', (event) => { const { currentTarget } = event; const { detail } = event; const consoleOutput = document.getElementById('"'"'console-output'"'"'); if (currentTarget.id === '"'"'event-checkbox'"'"') { const timestamp = new Date().toLocaleTimeString(); consoleOutput.innerHTML = `[${timestamp}] Checkbox clicked: ${currentTarget.id}, Checked: ${currentTarget.checked}`; } }); // Add some interactivity to demonstrate the component document.addEventListener('"'"'DOMContentLoaded'"'"', () => { console.log('"'"'Carbon Checkbox component loaded successfully'"'"'); }); </script> </body> </html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">