Radio button groups allow users to select one or more values from a given set of choices. You can align them horizontally or vertically.

When direction="vertical"

• Keep text short and as concise as possible in the horizontal orientation.
• Do not truncate text descriptions as this can hide important content relevant to the user’s workflow. Consider shortening or rewording the label if space is limited.
• The radio button icon should always be placed left aligned to the text.
• We recommend that you always use a text description for a radio button.

When direction="horizontal"

The default behaviour for Radio Button Group in a horizontal alignment allows radio button options to wrap onto the next line as the viewport size changes if they don’t fit within a container.

You can configure radio button groups to maintain a horizontal alignment but allow text wrapping by setting the prop wrap=false.

A disabled radio button isn't interactive or focusable.

You can disable a radio button by setting disabled={true}.

Use a disabled state for radio buttons that have permissions, dependencies or pre-requisites. For example, a radio button in a form may be disabled because the user hasn't yet completed an earlier section of the form.

If a disabled radio button's text description contains information that is valuable to the user, consider using a read-only radio button instead.

A read-only radio button permits the user to only read or copy the value, but not edit the value or change the state of the radio.

A radio button with the prop readOnly={true} will suppress all functionality along with displaying read-only styling.

Users can interact with read-only radio buttons using keyboard shortcuts. This means that, unlike disabled radio buttons, users can interact with the text description. Use a read-only radio button instead of a disabled radio button when the text description contains information valuable to the user.

You can indicate an error state stylistically by setting the validationStatus prop to "error".

You can indicate a warning state stylistically by setting the validationStatus prop to "warning".

• In a group, use validationStatus rather than the individual controls. Any status provided to the group will take precedence over the statuses applied directly to the nested controls.
• Avoid using validationStatus with a disabled radio button. If provided, disabled functionality and styling will take precedence over any validation status styling.

Radio Button supports long text descriptions. If text wraps to multiple lines, align it to the top of the radio button.

You can wrap RadioButtonGroup in a form field when it’s within a form context.

For more information, refer to the form field guidance.

You can add a description to a checkbox using a StackLayout in the label prop.