Radio

Renders a radio button group and returns the value of the selected option. Use when presenting a small number of choices where all options should be visible at once (typically 2–4 options). For longer lists, use a select instead.

Returns: The value of the selected option (a string).

Properties

If no default is specified, the first option will be selected initially.

Example

---
attributes:
  layout:
    type: radio
    label: Layout
    default: side-by-side
    options:
      - label: Stacked
        value: stacked
      - label: Side by side
        value: side-by-side
---

<div class="block__content block__content--{{ layout }}">
  <!-- content -->
</div>