Radio buttons allow the user to select one option from a set while seeing all available options.

Table of Contents

• Resources
• Basic Usage
• Radio
• Checked Radio
• Disabled Radio

Resources

• Demo: Radio Buttons
• Material Design Guidelines: Selection Controls – Radio buttons
• MDC Web: Radio
• Sass Mixins (MDC Web)

Basic Usage

Note that radio buttons are usually used in conjunction with form fields. Refer to FormField for more information.

import Material.Radio exposing (radio, radioConfig)


type Msg
    = RadioClicked


main =
    radio
        { radioConfig
            | checked = True
            , onChange = Just RadioClicked
        }

Radio

Checked Radio

To set the state of a radio button, set its checked configuration field to a Bool value.

radio { radioConfig | checked = False }

Disabled Radio

To disable a radio button, set its disabled configuration field to True. Disabled radio buttons cannot be interacted with and have no visual interaction effect.

radio { radioConfig | disabed = True }