Open AlienKevin opened 3 years ago
The way to customize radio buttons through Input.optionWith is not clearly documented. To improve the doc, I wrote a working example based on defaultRadioOption in the source:
Input.optionWith
defaultRadioOption
Run example on Ellie
Input.radio [ Element.padding 10 , Element.spacing 20 ] { onChange = ChooseLunch , selected = Just model.lunch , label = Input.labelAbove [] (Element.text "Lunch") , options = [ Input.optionWith Burrito (radioOption (Element.text "Burrito")) , Input.optionWith Taco (radioOption (Element.text "Taco!")) , Input.optionWith Gyro (radioOption (Element.text "Gyro")) ] } radioOption : Element msg -> Input.OptionState -> Element.Element msg radioOption optionLabel status = Element.row [ Element.spacing 10 , Element.alignLeft , Element.width Element.shrink ] [ Element.el [ Element.width (Element.px 20) , Element.height (Element.px 20) , Border.width <| case status of Input.Idle -> 2 Input.Focused -> 2 Input.Selected -> 10 , Border.color <| case status of Input.Idle -> Element.rgb 0.2 0.4 0.2 Input.Focused -> Element.rgb 0.2 0.4 0.2 Input.Selected -> Element.rgb 0.2 0.4 0.2 ] Element.none , Element.el [ Element.width Element.fill ] optionLabel ]
The way to customize radio buttons through
Input.optionWith
is not clearly documented. To improve the doc, I wrote a working example based ondefaultRadioOption
in the source:Run example on Ellie