بنية مجموعة أزرار الاختيار

    <.radio_group
  name="rg-minimal"
  class="radio-group"
  items={[
    %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
    %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
    %{value: "donec", label: "Donec condimentum ex mi"}
  ]}
>
  <:label>Choose one</:label>
</.radio_group>

  

    <.radio_group
  name="rg-indicator"
  class="radio-group"
  items={[
    %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
    %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
    %{value: "donec", label: "Donec condimentum ex mi"}
  ]}
>
  <:label>Choose one</:label>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>
</.radio_group>

  

    <.radio_group
  name="rg-invalid"
  class="radio-group"
  invalid
  errors={["Required"]}
  items={[
    %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
    %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
    %{value: "donec", label: "Donec condimentum ex mi"}
  ]}
>
  <:label>Choose one</:label>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>
  <:error :let={msg}>
    <.heroicon name="hero-exclamation-circle" class="icon" />
    {msg}
  </:error>
</.radio_group>

  

    <.radio_group
  name="rg-readonly"
  class="radio-group"
  read_only
  value="lorem"
  items={[
    %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
    %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
    %{value: "donec", label: "Donec condimentum ex mi"}
  ]}
>
  <:label>Choose one</:label>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>
</.radio_group>