OudsRadioButtonItem<T> class

OUDS Radio Button Design Guidelines

The Radio button item variant can function as a simple input with a label, or it can be combined with optional elements such as helper text, additional a divider, an outlined, or an icon, allowing it to suit various use cases.

The OUDS Radio button item layout contains an OudsRadioButton. By clicking on a radiobutton item, the user changes the checked state of its radio button.

If you want to use a standalone radio button please use OudsRadioButton.

Parameters:

• value The value represented by this radio button. Used to determine selection.
• groupValue The currently selected value in the radio button group. This radio button is considered selected if value == groupValue.
• onChanged Callback triggered when the user selects this radio button. If null, the radio button is disabled and non-interactive.
• isError Indicates whether the radio button is in an error state.
• title: The main label of the radio button item.
• additionalLabel: Optional strong accompanying text for the main label.
• helperTitle: Optional text displayed below the label.
• icon: Optional icon displayed in the item. By default, it has a trailing position. If reversed is set to true, it is displayed as a leading element.
• outlined: Outlined is designed to stand out and draw the user’s attention.
• reversed: When false, the checkbox has a leading position and the optional icon has a trailing position. Otherwise, it is reversed.
• readOnly: Controls the read only state of the radio button item. When true the item's radio button is disabled but the texts, the icon and the outlined remain in enabled color. Note that if it is set to true and enabled is set to false, the checkbox item will be displayed in disabled state.
• enabled: Controls the enabled state of the checkbox item. When false, the checkbox, the texts and the optional icon are disabled, and the item will not be clickable
• divider: Controls the display of a divider at the bottom of the checkbox item.

You can use OudsRadioButtonItem like this :

State enabled :

The default active state where the radio button is functional and selectable. It may show an unselected or selected style, with a label and helper text visible.

 OudsRadioButtonItem<RadioOption>(
   value: true,
   groupValue: true,
   onChanged: (RadioOption? value) {
        // Handle radio button change state.
    },
    title: 'Label',
    additionalLabel: 'Additional label',
    helperTitle: 'Helper text',
    reversed: false,
    readOnly: false,
    icon: 'assets/ic_heart.svg',
    isError: false,
    divider: true,
    outlined: false
);