## Feature Examples ### Structure - description:

The component consists of a list of options with radio buttons wrapped inside .

Option labels are plain text by default, but they can be replaced with any other component or set of components.

- example: ```jsx Option 1 Option 2 Option 3 Option 4 ; ``` ### Layout - description:

Control the layout of the options with the display prop. Choose from 2 layouts:

  • For most common cases, use the default vertical.
  • Use horizontal for options with short labels (e.g., Yes/No selections in a form), or when there is limited space.
    • - example: ```jsx Vertical 1 Vertical 2 Vertical 3 Horizontal 1 Horizontal 2 Horizontal 3 ; ``` ### Spacing - description:

    Control the pixel spacing between options with the spacing prop.

    - example: ```jsx Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 ; ``` ### Button alignment - description:

    Control how the radio buttons align to the text with the vAlign prop. Choose from 2 alignments:

  • center (the default) aligns the radio button to the middle of the text. It is recommended for most common cases.
  • top aligns the radio buttons to the top of the text. This is good for options that go over 3 or more lines of text.
    • - example: ```jsx Center aligned radio Subtitle Top aligned radio Subtitle ; ``` ### Disabled buttons - description:

    Radio options can be disabled in 2 ways:

  • Disable all options at once with disabled.
  • Choose which options to disable with disabledRadios.
    • - example: ```jsx All disabled All disabled All disabled Selected Unselected Disabled ; ``` ### Status message - description:

    Add text that explains the status or what action the user should take with the statusMessage prop.

    Show the status message inline, directly below the radio group by wrapping it in a and adding statusMessage.

    View more inline status message examples in .

    - example: ```jsx Option 1 Option 2 Option 3 ; ``` ### Button area - description:

    Highlight the clickable area of an option by controlling the design. It's recommended to always use this on mobile.

  • Specify when the button area should be highlighted (on hover, always, or not at all) with selectionArea.
  • To choose a filled or outlined design, use selectionAreaSkin.
  • Define the white pixel spacing around each radio button with selectionAreaPadding.
    • - example: ```jsx Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 ; ``` ### Additional content - description:

    Use the content prop to show additional details for an option. It accepts any kind of content and places it outside of a radio option.

    - example: ```jsx Details about Option 1 } > Option 1 Details about Option 2 } > Option 2 ; ``` ## Common Use Case Examples ### Settings panel - description:

    Only use small size radio buttons in settings panels to ensure consistency across all panels.

    - example: ```jsx () => { const [defaultStateselected, setDefaultStateSelected] = React.useState(1); const [homepageTypeSelected, setHomepageTypeSelected] = React.useState(1); return ( Full trail Hide homepage Hide current page Text Icon ); }; ``` ### Default selection - description:

    Have a default option selected whenever possible, ideally a neutral choice such as "None" or "All".

    - example: ```jsx () => { const [selected, setSelected] = React.useState(1); return ( All In stock Out of stock ); }; ``` ### Additional info - description:

    Use to add a tooltip next to an option to provide additional information.

    - example: ```jsx () => { const [selected, setSelected] = React.useState(2); return ( Include in the price Add at checkout ); }; ``` ### Horizontal layout - description:

    Use a horizontal layout when displaying radio lists with 2-3 options and short descriptions. This layout is great for situations where vertical space is limited.

    - example: ```jsx () => { const [selected, setSelected] = React.useState(2); return ( {}} > Radius Postal codes ); }; ``` ### Custom button - description:

    Other components can also be used in radio option labels (e.g., avatar, illustration, additional text).

    - example: ```jsx () => { const [selected, setSelected] = React.useState(1); return ( Individual You own and run the business with a personal bank account. Partnership, LLC or Corporation You have a business registration number and a business bank account. ); }; ```