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

Table of Contents

• Resources
• Basic Usage
• Configuration
  • Configuration Options
• 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.

import Material.Radio as Radio


type Msg
    = Changed


main =
    Radio.radio
        (Radio.config
            |> Radio.setChecked True
            |> Radio.setOnChange Changed
        )

Configuration

Configuration Options

Radio

Checked Radio

To make a radio button display its checked state, set its setChecked configuration option to True.

Radio.radio (Radio.config |> Radio.setChecked True)

Disabled Radio

To disable a radio button, set its setDisabled configuration option to True.

Disabled radio buttons cannot be interacted with and have no visual interaction effect.

Radio.radio (Radio.config |> Radio.setDisabled True)