Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - radio-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
<li>List options in an order that is contextual.</li> </ul> <h3>Best practices</h3> <ul> <li>Avoid nesting radio buttons within other radio buttons.</li> <li>If an option is strongly recommended, add "(Recommended)" to the label. Be sure to add it to the label, not the help text.</li> <li>Use the same name attribute on all radio buttons in the group. This ensures that if there is more than one group in the form, each one stays associated with its own group</li> <li>If a radio group is "Optional", users won't be able to unselect a selected radio. If you need to give users a way to unselect, consider adding a clear button or using another type of form field.</li> </ul> <h3>Accessibility</h3> <ul> <li>A radio group must have a visible label that is in close proximity to the control.</li> <li>HTML radio groups don't natively support the required attribute. If a radio must be checked, display a required indicator.</li> <li>Display error messages in an inline error below the radio group that clearly describes the error.</li> <li>Radio groups act as a single tab stop. When focused on a radio, use the arrow keys to navigate to the other radios.</li> </ul> <h2>Examples</h2> <h3>Vertically-stacked Radio Group</h3> <p>The vertically-stacked Radio Group is the easiest for users to scan, in particular if labels are more than 3 words. Use the vertical stack if the list wraps to two lines.</p> <div class="example-container"> <fieldset class="paste-radio-group"> <legend class="paste-radio-group-legend">What type of developer are you?</legend> <div class="paste-radio"> <input type="radio" id="frontend" name="developer-type" value="frontend"> <label for="frontend">Frontend Developer</label> </div> <div class="paste-radio"> <input type="radio" id="backend" name="developer-type" value="backend"> <label for="backend">Backend Developer</label> </div> <div class="paste-radio"> <input type="radio" id="fullstack" name="developer-type" value="fullstack"> <label for="fullstack">Full-stack Developer</label> </div> <div class="paste-radio"> <input type="radio" id="mobile" name="developer-type" value="mobile"> <label for="mobile">Mobile Developer</label> </div> </fieldset> </div> <h3>Pre-selected value</h3> <p>By default, the Radio Group component doesn't apply a pre-selected value.</p> <div class="example-container"> <fieldset class="paste-radio-group"> <legend class="paste-radio-group-legend">Preferred programming language</legend> <div class="paste-radio"> <input type="radio" id="javascript" name="language" value="javascript" checked disabled> <label for="javascript">JavaScript</label> </div> <div class="paste-radio"> <input type="radio" id="python" name="language" value="python" disabled> <label for="python">Python</label> </div> <div class="paste-radio"> <input type="radio" id="java" name="language" value="java" disabled> <label for="java">Java</label> </div> </fieldset> </div> <h3>With suffix</h3> <p>You can provide additional information about an individual item by adding a non-string element as a suffix. The suffix can be any non-string element that is not interactive.</p> <div class="example-container"> <fieldset class="paste-radio-group"> <legend class="paste-radio-group-legend">Select a plan</legend> <div class="paste-radio"> <input type="radio" id="basic" name="plan" value="basic"> <label for="basic"> <div class="radio-suffix"> Basic Plan <span class="paste-badge">Free</span> </div> </label> </div> <div class="paste-radio"> <input type="radio" id="pro" name="plan" value="pro"> <label for="pro"> <div class="radio-suffix"> Pro Plan <span class="paste-badge">Popular</span> </div> </label> </div> <div class="paste-radio"> <input type="radio" id="enterprise" name="plan" value="enterprise"> <label for="enterprise">Enterprise Plan</label> </div> </fieldset> </div> <h3>Required usage</h3> <p>Use the required dot to denote a required field. The required dot appears before the fieldset legend.</p> <div class="example-container"> <fieldset class="paste-radio-group"> <legend class="paste-radio-group-legend required">Select your country</legend> <div class="paste-radio"> <input type="radio" id="us" name="country" value="us"> <label for="us">United States</label> </div> <div class="paste-radio"> <input type="radio" id="ca" name="country" value="ca"> <label for="ca">Canada</label> </div> <div class="paste-radio"> <input type="radio" id="uk" name="country" value="uk"> <label for="uk">United Kingdom</label> </div> </fieldset> </div> <h3>Horizontal alignment</h3> <p>Use horizontal alignment sparingly, as the options are harder to scan. Use labels that are 3 words or less, or less than 20 characters.</p> <div class="example-container"> <fieldset class="paste-radio-group" data-orientation="horizontal"> <legend class="paste-radio-group-legend">Size</legend> <div class="paste-radio"> <input type="radio" id="small" name="size" value="small"> <label for="small">Small</label> </div> <div class="paste-radio"> <input type="radio" id="medium" name="size" value="medium"> <label for="medium">Medium</label> </div> <div class="paste-radio"> <input type="radio" id="large" name="size" value="large"> <label for="large">Large</label> </div> </fieldset> </div> <h2>States</h2> <h3>Disabled</h3> <div class="example-container"> <div class="paste-radio"> <input type="radio" id="disabled-option" name="disabled" value="option" disabled> <label for="disabled-option">Option 1</label> </div> </div> <h3>Checked and disabled</h3> <div class="example-container"> <div class="paste-radio"> <input type="radio" id="checked-disabled" name="checked-disabled" value="option" checked disabled> <label for="checked-disabled">Option 2</label> </div> </div> <h3>Group error</h3> <p>If the selected items don't pass the group validation requirements, use Help Text to show an inline error message below the group.</p> <div class="example-container"> <fieldset class="paste-radio-group"> <legend class="paste-radio-group-legend required">Select your preferred method</legend> <div class="paste-radio error"> <input type="radio" id="method1" name="method-error" value="method1"> <label for="method1">Method 1</label> </div> <div class="paste-radio error"> <input type="radio" id="method2" name="method-error" value="method2"> <label for="method2">Method 2</label> </div> <div class="paste-help-text error">Please select a method.</div> </fieldset> </div> <h3>Individual error</h3> <div class="example-container"> <div class="paste-radio error"> <input type="radio" id="criteria" name="criteria" value="criteria" checked> <label for="criteria">Contacts no longer meet entry criteria</label> </div> </div> <h2>Composition notes</h2> <p>Start all options with a capital letter.</p> <p>Avoid using periods with radio option text, even if it's a sentence.</p> <p>If using Help Text for radio options, include it for each option.</p> <h3>Validation</h3> <p>Validate the group on form submission. Don't validate each item in the group, treat validation on the group as a whole.</p> <h2>Error message formats</h2> <p>For required field errors, consider the following formats depending on the use case:</p> <table> <thead> <tr> <th>Situation</th> <th>Recommended phrasing</th> </tr> </thead> <tbody> <tr> <td>When the option being selected is not a noun</td> <td>Select an option.</td> </tr> <tr> <td>When the option to be selected is a noun</td> <td>Select a [noun in group label].</td> </tr> </tbody> </table> </div></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">