RadioGroup

One of a few choices, all in sight. These are native radios, drawn to match the rest. For a longer list, use a Select.

<script>
  import { Field, RadioGroup } from "@elyra/ui";

  let billing = $state("yearly");
</script>

<Field label="Billing">
  <RadioGroup
    bind:value={billing}
    inline
    options={[
      { value: "monthly", label: "Monthly" },
      { value: "yearly", label: "Yearly" },
      { value: "lifetime", label: "Lifetime", disabled: true },
    ]}
  />
</Field>

options are strings, or { value, label, disabled }. bind:value is the chosen one's value. inline puts them on one line.

Outside a field

In a Field, the field's label names the group. Outside one, give it a label.

<script>
  import { RadioGroup } from "@elyra/ui";

  let delivery = $state("Email");
</script>

<RadioGroup label="Send invoices by" bind:value={delivery} options={["Email", "EHF", "Post"]} />

Keyboard

Accessibility

• A role="radiogroup", named by label or by the field's label. In a Field, it has aria-describedby and aria-invalid.
• The radios share a name: the field's, or one of the group's own. The browser moves between them.

API

RadioGroup

Other attributes go to the group's <div>.