Input: Radio

Observable Framework documentation: Input: Radio Source: https://observablehq.com/framework/input-radio

<a href="https://github.com/observablehq/inputs/blob/main/README.md#radio">API</a> · <a href="https://github.com/observablehq/inputs/blob/main/src/checkbox.js">Source</a> · The radio input allows the user to choose one of a given set of values. (See the checkbox input for multiple-choice.) A radio is recommended over a select input when the number of values to choose from is small — say, seven or fewer — because all choices will be visible up-front, improving usability.

const color = view(Inputs.radio(["red", "green", "blue"], {label: "color"}));

color

Note that a radio cannot be cleared by the user once selected; if you wish to allow no selection, include null in the allowed values.

const vote = view(Inputs.radio(["Yea", "Nay", null], {value: null, format: (x) => x ?? "Abstain"}));

vote

A radio’s values need not be strings: they can be anything. Specify a format function to control how these values are presented to the reader.

const teams = [
  {name: "Lakers", location: "Los Angeles, California"},
  {name: "Warriors", location: "San Francisco, California"},
  {name: "Celtics", location: "Boston, Massachusetts"},
  {name: "Nets", location: "New York City, New York"},
  {name: "Raptors", location: "Toronto, Ontario"},
];

const favorite = view(Inputs.radio(teams, {label: "Favorite team", format: x => x.name}));

favorite

A radio can be disabled by setting the disabled option to true. Alternatively, specific options can be disabled by passing an array of values to disable.

const vowel = view(Inputs.radio([..."AEIOUY"], {label: "Vowel", disabled: ["Y"]}));

vowel

The format function, like the label, can return either a text string or an HTML element. This allows extensive control over the appearance of the radio, if desired.

const color2 = view(
  Inputs.radio(["red", "green", "blue"], {
    value: "red",
    label: html`<b>Colors</b>`,
    format: (x) =>
      html`<span style="
          text-transform: capitalize;
          border-bottom: solid 2px ${x};
          margin-bottom: -2px;
        ">${x}</span>`
  })
);

color2

If the radio’s data are specified as a Map, the values will be the map’s values while the keys will be the displayed options. (This behavior can be customized by passing keyof and valueof function options.) Below, the displayed sizes are named, but the value is the corresponding number of fluid ounces.

const size = view(
  Inputs.radio(
    new Map([
      ["Short", 8],
      ["Tall", 12],
      ["Grande", 16],
      ["Venti", 20]
    ]),
    {value: 12, label: "Size"}
  )
);

size

Since the format function is passed elements from the data, it can access both the key and value from the corresponding Map entry.

const size2 = view(
  Inputs.radio(
    new Map([
      ["Short", 8],
      ["Tall", 12],
      ["Grande", 16],
      ["Venti", 20]
    ]),
    {value: 12, label: "Size", format: ([name, value]) => `${name} (${value} oz)`}
  )
);

size2

Passing a Map to radio is especially useful in conjunction with d3.group. For example, given a tabular dataset of Olympic athletes (olympians), we can use d3.group to group them by gold medal count, and then a radio input to select the athletes for the chosen count.

const goldAthletes = view(
  Inputs.radio(
    d3.group(olympians, (d) => d.gold),
    {label: "Gold medal count", sort: "descending"}
  )
);

goldAthletes

If the sort and unique options are specified, the radio’s keys will be sorted and duplicate keys will be discarded, respectively.

const base = view(Inputs.radio("GATTACA", {sort: true, unique: true}));

base

Options

Inputs.radio(data, options)

The available radio input options are:

• label - a label; either a string or an HTML element
• sort - true, ascending, descending, or a comparator to sort keys; defaults to false
• unique - true to only show unique keys; defaults to false
• locale - the current locale; defaults to English
• format - a format function; defaults to formatLocaleAuto composed with keyof
• keyof - a function to return the key for the given element in data
• valueof - a function to return the value of the given element in data
• value - the initial value; defaults to null (no selection)
• disabled - whether input is disabled, or the disabled values; defaults to false