Blocks

Radio Group

Styled native radio buttons grouped by name. No JS — standard browser semantics.

Usage

Hobby ($0/mo)

Pro ($19/mo)

Team ($49/mo)

live_example do
  sui.radio_group do
    sui.layout.row gap: 2 do
      sui.radio_group_item name: "plan", value: "hobby", id: "plan-hobby"
      sui.label "Hobby ($0/mo)", for: "plan-hobby"
    end
    sui.layout.row gap: 2 do
      sui.radio_group_item name: "plan", value: "pro", id: "plan-pro", checked: true
      sui.label "Pro ($19/mo)", for: "plan-pro"
    end
    sui.layout.row gap: 2 do
      sui.radio_group_item name: "plan", value: "team", id: "plan-team"
      sui.label "Team ($49/mo)", for: "plan-team"
    end
  end
end