Radio Group

Radio groups are used to group multiple radios so they function as a single form control.

RadioGroup(_.label := "Select an option", _.name := "a", _.value := "1")(
  Radio(_.value := "1")("Option 1"),
  Radio(_.value := "2")("Option 2"),
  Radio(_.value := "3")("Option 3")
)

RadioGroup(_.label := "Select an option", _.name := "a", _.value := "1")(  Radio(_.value := "1")("Option 1"),  Radio(_.value := "2")("Option 2"),  Radio(_.value := "3")("Option 3"))

Examples

Hint

Add descriptive hint to a radio group with the hint attribute. For hints that contain HTML, use the hint slot instead.

RadioGroup(
  _.label := "Select an option",
  _.hint  := "Choose the most appropriate option.",
  _.name  := "a",
  _.value := "1"
)(
  Radio(_.value := "1")("Option 1"),
  Radio(_.value := "2")("Option 2"),
  Radio(_.value := "3")("Option 3")
)

RadioGroup(  _.label := "Select an option",  _.hint  := "Choose the most appropriate option.",  _.name  := "a",  _.value := "1")(  Radio(_.value := "1")("Option 1"),  Radio(_.value := "2")("Option 2"),  Radio(_.value := "3")("Option 3"))

Radio Buttons

Set the appearance attribute to button on all radios to render a radio button group.

RadioGroup(
  _.label := "Horizontal options",
  _.hint  := "Select an option that makes you proud.",
  _.orientation.horizontal,
  _.name  := "a",
  _.value := "1"
)(
  Radio(_.appearance.button, _.value := "1")("Option 1"),
  Radio(_.appearance.button, _.value := "2")("Option 2"),
  Radio(_.appearance.button, _.value := "3")("Option 3")
)
RadioGroup(
  _.label := "Vertical options",
  _.hint  := "Select an option that makes you proud.",
  _.orientation.vertical,
  _.name  := "a",
  _.value := "1"
)(
  maxWidth.px(300),
  Radio(_.appearance.button, _.value := "1")("Option 1"),
  Radio(_.appearance.button, _.value := "2")("Option 2"),
  Radio(_.appearance.button, _.value := "3")("Option 3")
)

RadioGroup(  _.label := "Horizontal options",  _.hint  := "Select an option that makes you proud.",  _.orientation.horizontal,  _.name  := "a",  _.value := "1")(  Radio(_.appearance.button, _.value := "1")("Option 1"),  Radio(_.appearance.button, _.value := "2")("Option 2"),  Radio(_.appearance.button, _.value := "3")("Option 3"))RadioGroup(  _.label := "Vertical options",  _.hint  := "Select an option that makes you proud.",  _.orientation.vertical,  _.name  := "a",  _.value := "1")(  maxWidth.px(300),  Radio(_.appearance.button, _.value := "1")("Option 1"),  Radio(_.appearance.button, _.value := "2")("Option 2"),  Radio(_.appearance.button, _.value := "3")("Option 3"))

Disabling

To disable the entire radio group, add the disabled attribute to the radio group.

RadioGroup(
  _.label    := "Select an option",
  _.disabled := true
)(
  Radio(_.value := "1")("Option 1"),
  Radio(_.value := "2", _.disabled := true)("Option 2"),
  Radio(_.value := "3")("Option 3")
)

RadioGroup(  _.label    := "Select an option",  _.disabled := true)(  Radio(_.value := "1")("Option 1"),  Radio(_.value := "2", _.disabled := true)("Option 2"),  Radio(_.value := "3")("Option 3"))

To disable individual options, add the disabled attribute to the respective options.

RadioGroup(_.label := "Select an option")(
  Radio(_.value := "1")("Option 1"),
  Radio(_.value := "2", _.disabled := true)("Option 2"),
  Radio(_.value := "3")("Option 3")
)

RadioGroup(_.label := "Select an option")(  Radio(_.value := "1")("Option 1"),  Radio(_.value := "2", _.disabled := true)("Option 2"),  Radio(_.value := "3")("Option 3"))

Orientation

The default orientation for radio items is vertical. Set the orientation to horizontal to items on the same row.

RadioGroup(
  _.label := "Select an option",
  _.hint  := "Choose the most appropriate option.",
  _.orientation.horizontal,
  _.name  := "a",
  _.value := "1"
)(
  Radio(_.value := "1")("Option 1"),
  Radio(_.value := "2")("Option 2"),
  Radio(_.value := "3")("Option 3")
)

RadioGroup(  _.label := "Select an option",  _.hint  := "Choose the most appropriate option.",  _.orientation.horizontal,  _.name  := "a",  _.value := "1")(  Radio(_.value := "1")("Option 1"),  Radio(_.value := "2")("Option 2"),  Radio(_.value := "3")("Option 3"))

Sizing Options

The size of radios will be determined by the Radio Group's size attribute.

RadioGroup(
  _.size.small
)(
  Radio(_.value := "small")("Small"),
  Radio(_.value := "medium")("Medium"),
  Radio(_.value := "large")("Large")
)
RadioGroup(
  _.size.medium
)(
  Radio(_.value := "small")("Small"),
  Radio(_.value := "medium")("Medium"),
  Radio(_.value := "large")("Large")
)
RadioGroup(
  _.size.large
)(
  Radio(_.value := "small")("Small"),
  Radio(_.value := "medium")("Medium"),
  Radio(_.value := "large")("Large")
)

RadioGroup(  _.size.small)(  Radio(_.value := "small")("Small"),  Radio(_.value := "medium")("Medium"),  Radio(_.value := "large")("Large"))RadioGroup(  _.size.medium)(  Radio(_.value := "small")("Small"),  Radio(_.value := "medium")("Medium"),  Radio(_.value := "large")("Large"))RadioGroup(  _.size.large)(  Radio(_.value := "small")("Small"),  Radio(_.value := "medium")("Medium"),  Radio(_.value := "large")("Large"))

Radios also have a size attribute, which will override the inherited size when used.

Validation

Setting the required attribute to make selecting an option mandatory. If a value has not been selected, it will prevent the form from submitting and display an error message.

form(
  onSubmit.preventDefault --> Observer[dom.Event] { _ =>
    dom.window.alert("All fields are valid!")
  },
  RadioGroup(
    _.label    := "Select an option",
    _.name     := "a",
    _.required := true
  )(
    Radio(_.value := "1")("Option 1"),
    Radio(_.value := "2")("Option 2"),
    Radio(_.value := "3")("Option 3")
  ),
  br(),
  Button(
    _.typ.submit,
    _.variant.brand
  )("Submit")
)

form(  onSubmit.preventDefault --> Observer[dom.Event] { _ =>    dom.window.alert("All fields are valid!")  },  RadioGroup(    _.label    := "Select an option",    _.name     := "a",    _.required := true  )(    Radio(_.value := "1")("Option 1"),    Radio(_.value := "2")("Option 2"),    Radio(_.value := "3")("Option 3")  ),  br(),  Button(    _.typ.submit,    _.variant.brand  )("Submit"))