Material.Radio

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

Resources
Basic Usage
Configuration
- Configuration Options
Radio
Checked Radio
Disabled Radio
Focus a Radio
Touch Support

Resources

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

type Config msg

Radio button configuration

config : Config msg

Default radio button configuration

Configuration Options

setOnChange : msg -> Config msg -> Config msg

Specify a message when the user changes a radio

setChecked : Bool -> Config msg -> Config msg

Specify whether a radio button is checked

setDisabled : Bool -> Config msg -> Config msg

Specify whether a radio button is disabled

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

setTouch : Bool -> Config msg -> Config msg

Specify whether touch support is enabled (enabled by default)

Touch support is an accessibility guideline that states that touch targets should be at least 48 x 48 pixels in size. Use this configuration option to disable increased touch target size.

Note: Radios with touch support will be wrapped in a HTML div element to prevent potentially overlapping touch targets on adjacent elements.

setAttributes : List (Attribute msg) -> Config msg -> Config msg

Specify additional attributes

Radio

radio : Config msg -> Html msg

Radio button view function

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)

Focus a Radio

You may programatically focus a radio button by assigning an id attribute to it and use Browser.Dom.focus.

Radio.radio
    (Radio.config
        |> Radio.setAttributes
            [ Html.Attributes.id "my-radio" ]
    )

Touch Support

Touch support is enabled by default. To disable touch support set a radio's setTouch configuration option to False.

Radio.radio (Radio.config |> Radio.setTouch False)

aforemny/material-components-web-elm/9.1.0