--- meta: title: Radio Group description: Radio groups are used to group multiple radios so they function as a single form control. layout: component --- ```html:preview Option 1 Option 2 Option 3 ``` :::tip This component works with standard `
` elements. Please refer to the section on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation. ::: ## Examples ### Basic Radio Group Use the `label` attribute to give the radio group an accessible label. For labels that contain HTML, use the `label` slot instead. A basic radio group lays out multiple radio items vertically. ```html:preview Initiate outbound transfers Approve outbound transfers Export transactions ``` ### Initial Values Use the `value` attribute to set the initial selection. ```html:preview Credit Card Debit Card Bank Transfer ``` ### Help Text Add descriptive help text to a radio group with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead. ```html:preview Initiate outbound transfers Approve outbound transfers Export transactions
Initiate outbound transfers Approve outbound transfers Export transactions
Outbound transfers require separate initiators and approvers
 ``` ### Label with Tooltip Use the `label-tooltip` attribute to add text that appears in a tooltip triggered by an info icon next to the label. :::tip **Usage:** Use a **label tooltip** to provide helpful but non-essential instructions or examples to guide people when making a selection from the radio group. Use **help text** to communicate instructions or requirements for making a selection without errors. ::: ```html:preview Initiate outbound transfers Approve outbound transfers Export transactions ``` ### Sizes Use the `size` attribute to change a radio group's size. This size will be applied to all child radios in the group. Size `medium` is the default. ```html:preview Option 1 Option 2 Option 3
Option 1 Option 2 Option 3
Option 1 Option 2 Option 3 ``` ### Horizontal Radio Group Use the `horizontal` attribute to lay out multiple radio items horizontally. :::tip **Making the horizontal radio group responsive:** Use a container query to adjust the layout of the radio group's `form-control-input` part (which wraps the radio items) at a custom target breakpoint (the container's width when the horizontal layout breaks). In the example below, a container query checks the width of the radio group container and switches the layout to vertical (setting `flex-direction` to `column`) when the container becomes too narrow for a horizontal layout. ::: ```html:preview Manage transfers Export transactions ``` ### Contained Radio Group Use the `contained` attribute to draw a card-like container around each radio item in the radio group. This style is useful for giving more emphasis to the list of options. This option can be combined with the `horizontal` attribute. ```html:preview Initiate outbound transfers Approve outbound transfers Export transactions

Initiate outbound transfers Approve outbound transfers ``` :::tip When [radios](/components/radio) are wrapped with the Radio Group, adding the `contained` attribute to the parent Radio Group or to _any_ radio in the group will create `contained` radios for the entire group. ::: ### Disabling Options Radios can be disabled by adding the `disabled` attribute to the respective options inside the radio group. ```html:preview Initiate outbound transfers Approve outbound transfers Export transactions ``` ### Form Integration Radio group components work seamlessly with standard HTML forms. The radio group's `name` attribute determines the key in the form data, and the selected radio's `value` becomes the value. ```html:preview Engineering Design Marketing Sales
Junior Mid-level Senior
Submit Reset
``` ### Validation Set the `required` attribute to make selecting an option mandatory. If a value has not been selected, it will prevent the form from submitting and display an error message. ```html:preview
Option 1 Option 2 Option 3
Submit
``` ### Custom Validity Use the `setCustomValidity()` method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string. ```html:preview
I'm not the right choice You must choose me I won't work either
Submit
``` ### Programmatic Control You can control the radio group programmatically using its methods and properties: ```html:preview
Option 1 Option 2 Option 3 Option 4
Focus Set Value to Option 3 Check Validity Get Form
``` ### Keyboard Navigation The radio group component supports comprehensive keyboard navigation: - **Tab** - Move focus to/from the radio group (focuses the checked radio, or the first radio if none are checked) - **Arrow Up/Left** - Select the previous radio in the group (wraps around to the last option) - **Arrow Down/Right** - Select the next radio in the group (wraps around to the first option) - **Space** - Select the currently focused radio ### Customizing Label Position Use [CSS parts](#css-parts) to customize the way form controls are drawn. This example uses CSS grid to position the label to the left of the control. ```html:preview Engineering Design Marketing ```