Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - radio-button-group
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 class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Use Radio Button Group when options are mutually exclusive and only one option is valid.</p> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't use Radio Button Groups if you need to select multiple options.</p> </div> </div> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Group related buttons in a Radio Button Group (e.g., types of graphs).</p> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't group buttons together that are not related to each other.</p> </div> </div> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Pair icon-only variants with text for better context.</p> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't use the icon-only variant if the icons are not easily recognizable.</p> </div> </div> <div class="do-dont-container"> <div class="do-card"> <div class="do-title">Do</div> <p>Use Radio Button Group to let users select one option from a list.</p> </div> <div class="dont-card"> <div class="dont-title">Don't</div> <p>Don't use Radio Button Groups for actions, such as save, edit, or delete. Use single Buttons or a Button Group instead.</p> </div> </div> <script> // Text Example document.getElementById("text-example").innerHTML = ` <div data-paste-element="RADIO_BUTTON_GROUP" role="radiogroup" aria-labelledby="chart-type-label"> <label id="chart-type-label" style="display: block; margin-bottom: 8px; font-weight: 600;">Chart type</label> <div style="display: flex; gap: 4px;"> <button data-paste-element="RADIO_BUTTON" role="radio" aria-checked="true" style=" background: #0263E0; color: white; border: 1px solid #0263E0; padding: 8px 16px; border-radius: 4px 0 0 4px; cursor: pointer; font-size: 14px; ">Bar</button> <button data-paste-element="RADIO_BUTTON" role="radio" aria-checked="false" style=" background: white; color: #121C2D; border: 1px solid #8891AA; padding: 8px 16px; border-radius: 0; cursor: pointer; font-size: 14px; ">Line</button> <button data-paste-element="RADIO_BUTTON" role="radio" aria-checked="false" style=" background: white; color: #121C2D; border: 1px solid #8891AA; padding: 8px 16px; border-radius: 0 4px 4px 0; cursor: pointer; font-size: 14px; ">Pie</button> </div> </div> `; // Text and Icon Example document.getElementById("text-icon-example").innerHTML = ` <div data-paste-element="RADIO_BUTTON_GROUP" role="radiogroup" aria-labelledby="contact-method-label"> <label id="contact-method-label" style="display: block; margin-bottom: 8px; font-weight: 600;">Contact method</label> <div style="display: flex; gap: 4px;"> <button data-paste-element="RADIO_BUTTON" role="radio" aria-checked="true" style=" background: #0263E0; color: white; border: 1px solid #0263E0; padding: 8px 16px; border-radius: 4px 0 0 4px; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 8px; ">📞 Call</button> <button data-paste-element="RADIO_BUTTON" role="radio" aria-checked="false" style=" background: white; color: #121C2D; border: 1px solid #8891AA; padding: 8px 16px; border-radius: 0; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 8px; ">💬 SMS</button> <button data-paste-element="RADIO_BUTTON" role="radio" aria-checked="false" style=" background: white; color: #121C2D; border: 1px solid #8891AA; padding: 8px 16px; border-radius: 0 4px 4px 0; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 8px; ">✉️ Email</button> </div> </div> `; // Error Example document.getElementById("error-example").innerHTML = ` <div data-paste-element="RADIO_BUTTON_GROUP" role="radiogroup" aria-labelledby="priority-label" aria-describedby="priority-error"> <label id="priority-label" style="display: block; margin-bottom: 8px; font-weight: 600;">Priority</label> <div style="display: flex; gap: 4px;"> <button data-paste-element="RADIO_BUTTON" role="radio" aria-checked="false" style=" background: white; color: #121C2D; border: 1px solid #D61F1F; padding: 8px 16px; border-radius: 4px 0 0 4px; cursor: pointer; font-size: 14px; ">Low</button> <button data-paste-element="RADIO_BUTTON" role="radio" aria-checked="false" style=" background: white; color: #121C2D; border: 1px solid #D61F1F; padding: 8px 16px; border-radius: 0; cursor: pointer; font-size: 14px; ">Medium</button> <button data-paste-element="RADIO_BUTTON" role="radio" aria-checked="false" style=" background: white; color: #121C2D; border: 1px solid #D61F1F; padding: 8px 16px; border-radius: 0 4px 4px 0; cursor: pointer; font-size: 14px; ">High</button> </div> <div id="priority-error" style="color: #D61F1F; font-size: 14px; margin-top: 4px;">Please select a priority level.</div> </div> `; // Disabled Example document.getElementById("disabled-example").innerHTML = ` <div data-paste-element="RADIO_BUTTON_GROUP" role="radiogroup" aria-labelledby="status-label"> <label id="status-label" style="display: block; margin-bottom: 8px; font-weight: 600; color: #8891AA;">Status</label> <div style="display: flex; gap: 4px;"> <button data-paste-element="RADIO_BUTTON" role="radio" aria-checked="true" disabled style=" background: #E1E3EA; color: #8891AA; border: 1px solid #E1E3EA; padding: 8px 16px; border-radius: 4px 0 0 4px; cursor: not-allowed; font-size: 14px; ">Active</button> <button data-paste-element="RADIO_BUTTON" role="radio" aria-checked="false" disabled style=" background: #F4F4F6; color: #8891AA; border: 1px solid #E1E3EA; padding: 8px 16px; border-radius: 0; cursor: not-allowed; font-size: 14px; ">Inactive</button> <button data-paste-element="RADIO_BUTTON" role="radio" aria-checked="false" disabled style=" background: #F4F4F6; color: #8891AA; border: 1px solid #E1E3EA; padding: 8px 16px; border-radius: 0 4px 4px 0; cursor: not-allowed; font-size: 14px; ">Pending</button> </div> </div> `; // Add click functionality to radio buttons document.querySelectorAll('[data-paste-element="RADIO_BUTTON"]').forEach(button => { button.addEventListener('click', function() { if (this.disabled) return; // Find the parent radio group const radioGroup = this.closest('[data-paste-element="RADIO_BUTTON_GROUP"]'); // Uncheck all buttons in this group radioGroup.querySelectorAll('[data-paste-element="RADIO_BUTTON"]').forEach(btn => { btn.setAttribute('aria-checked', 'false'); btn.style.background = 'white'; btn.style.color = '#121C2D'; btn.style.border = '1px solid #8891AA'; }); // Check this button this.setAttribute('aria-checked', 'true'); this.style.background = '#0263E0'; this.style.color = 'white'; this.style.border = '1px solid #0263E0'; }); }); </script></body></html>' width="100%" height="1800" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">