Radio buttons allow the user to select one option from a set while seeing all available options.
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
)
Radio button configuration
config : Config msg
Default radio button configuration
setOnChange : msg -> Config msg -> Config msg
Specify a message when the user changes a radio
setChecked : Basics.Bool -> Config msg -> Config msg
Specify whether a radio button is checked
setDisabled : Basics.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 : Basics.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 (Html.Attribute msg) -> Config msg -> Config msg
Specify additional attributes
radio : Config msg -> Html msg
Radio button view function
To make a radio button display its checked state, set its setChecked
configuration option to True
.
Radio.radio (Radio.config |> Radio.setChecked True)
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)
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 is enabled by default. To disable touch support set a radio's
setTouch
configuration option to False
.
Radio.radio (Radio.config |> Radio.setTouch False)