RadioGroup

One choice of a few, all in view — a radio per option under a caption. The same shape as Dropdown: value is a two-way Binding<T>, options default to the enum's members worded by their labels, and a template says what one option reads. Reach for it when there are two to six options and the person should see them before choosing.

Summary#

A dropdown hides its options until it is opened; a radio group shows them. That is the right trade when there are only a few, when they explain each other, and when the person is filling in something they may never have seen before — a form anyone may have to use. RadioGroup binds a value exactly as Dropdown does.

enum Venue { [Label("A café")] Cafe, [Label("A gallery")] Gallery, [Label("Somewhere else")] Other }

[Route("/listing")] [Render(CSR)] [AllowAnonymous]
component ListingPage() {
  Venue kind = Venue.Cafe;
  render {
    Stack(gap: 4, p: 6) {
      RadioGroup("What kind of venue is it?", value: kind, hint: "Choose the one most visitors would say.");
      Text("You chose: " + kind.Label);
    }
  }
}

Signature#

RadioGroup<T>(string label, Binding<T> value, T[] options = T.Members, string hint = "", bool disabled = false)
  { option => <what one option reads> }   // optional; defaults to its Label

Description#

Radio or dropdown?#

Two to six options a person should compare: RadioGroup. Many options, or options the person already knows (a country, a currency): Dropdown. Yes or no: Checkbox or Switch.

Over rows rather than an enum?#

Pass options: and a template, as with Dropdown: RadioGroup("Ship with", value: order.Carrier, options: carriers) { c => Text(c.Name); }.

How do I drive it in a test?#

Press an option by its words — Ui.Click("A gallery") — and read it back with Assert.Checked("A gallery").