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

    <.radio_group name="rg-style-default" class="radio-group" 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"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>
<.radio_group name="rg-style-accent" class="radio-group radio-group--accent" 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"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>
<.radio_group name="rg-style-brand" class="radio-group radio-group--brand" 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"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>
<.radio_group name="rg-style-alert" class="radio-group radio-group--alert" 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"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>
<.radio_group name="rg-style-success" class="radio-group radio-group--success" 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"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>
<.radio_group name="rg-style-info" class="radio-group radio-group--info" 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"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

  

    <.radio_group name="rg-style-sm" class="radio-group radio-group--sm" 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"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>
<.radio_group name="rg-style-md" class="radio-group radio-group--md" 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"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>
<.radio_group name="rg-style-lg" class="radio-group radio-group--lg" 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"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>
<.radio_group name="rg-style-xl" class="radio-group radio-group--xl" 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"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

  

    <.radio_group name="rg-style-max-2xs" class="radio-group max-w-2xs" 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"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>
<.radio_group name="rg-style-max-md" class="radio-group max-w-md" 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"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>
<.radio_group name="rg-style-max-xl" class="radio-group max-w-xl" 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"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>
<.radio_group name="rg-style-max-2xl" class="radio-group max-w-2xl" 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"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>