Skip to main content

Radio

    Use the Radio to let users select one option from a small group of mutually exclusive choices. The choices are presented so users can compare all options at once.

    OverviewPropertiesUsageChangelog

    When to use​

    • When users need to select exactly one option from a small set of mutually exclusive choices.
    • When all options should be visible at once so users can compare them before choosing.

    When not to use​

    • When users can select more than one option. Use Checkbox instead.
    • When there are more than four options. Use Select instead.
    • When users need to toggle a setting on and off. Use Switch instead.
    • To filter content or switch between different visual representations on a page. Use ToggleButtonGroup instead.

    Position​

    Four Radio components labeled "Write", "Execute", "Read only", and "No access", shown stacked vertically on the left and in a single horizontal row on the right.

    Four Radio components labeled "Write", "Execute", "Read only", and "No access", shown stacked vertically on the left and in a single horizontal row on the right.

    Vertical​

    • Use vertical alignment in most instances. It's suitable for responsive layouts, when you offer a relatively large number of options, or when vertical alignment stays consistent within a certain context, such as within a form.

    Horizontal​

    • If you need a horizontal layout, avoid wrapping options into a new line.

    Example of correct horizontally aligned Radio components fitting on a single line, and an incorrect group that wraps onto a second line.

    Example of correct horizontally aligned Radio components fitting on a single line, and an incorrect group that wraps onto a second line.

    Still have questions?
    Find answers in the Dynatrace Community