Radio Group

A group of radio buttons. Each item includes a real hidden <input type="radio"> so the group submits with a Rails form.

Choose a plan Basic — $0/mo Pro — $12/mo

<div
  data-controller="zag-radio-group"
  data-part="root"
  data-zag-radio-group-name-value="plan"
  data-zag-radio-group-value-value="pro"
  class="space-y-2"
>
  <span data-part="label" class="text-sm font-medium">Choose a plan</span>
  <label data-part="item" data-value="basic" class="flex cursor-pointer items-center gap-3">
    <input data-part="item-hidden-input" class="sr-only" />
    <span
      data-part="item-control"
      class="border-input bg-popover data-[state=checked]:border-primary grid h-4 w-4 place-items-center rounded-full border"
    >
      <span
        class="bg-primary h-2 w-2 rounded-full opacity-0 [[data-state=checked]_&]:opacity-100"
      ></span>
    </span>
    <span data-part="item-text" class="text-sm">Basic — $0/mo</span>
  </label>
  <label data-part="item" data-value="pro" class="flex cursor-pointer items-center gap-3">
    <input data-part="item-hidden-input" class="sr-only" />
    <span
      data-part="item-control"
      class="border-input bg-popover data-[state=checked]:border-primary grid h-4 w-4 place-items-center rounded-full border"
    >
      <span
        class="bg-primary h-2 w-2 rounded-full opacity-0 [[data-state=checked]_&]:opacity-100"
      ></span>
    </span>
    <span data-part="item-text" class="text-sm">Pro — $12/mo</span>
  </label>
</div>

Parts

root, label, indicator, item, item-text, item-control, item-hidden-input. Each item carries a data-value.

Values

Attribute	Type	Default	Description
data-zag-radio-group-value-value	String	""	Item selected by default.
data-zag-radio-group-name-value	String	""	name of the radio inputs (for forms).
data-zag-radio-group-orientation-value	String	"vertical"	"vertical" or "horizontal".
data-zag-radio-group-disabled-value	Boolean	false	Disable the group.
data-zag-radio-group-required-value	Boolean	false	Mark the field required.
data-zag-radio-group-invalid-value	Boolean	false	Mark the field invalid.
data-zag-radio-group-read-only-value	Boolean	false	Read-only.

Events

Emits zag-radio-group:change — detail is { value }.

Programmatic control

value (getter), select(value).