مجموعة التبديل · النمط البصري

    <.toggle_group class="toggle-group" value={["lorem"]}>
  <:item value="lorem">Lorem</:item>
  <:item value="duis">Duis</:item>
  <:item value="donec">Donec</:item>
</.toggle_group>
<.toggle_group class="toggle-group toggle-group--accent" value={["lorem"]}>
  <:item value="lorem">Lorem</:item>
  <:item value="duis">Duis</:item>
  <:item value="donec">Donec</:item>
</.toggle_group>
<.toggle_group class="toggle-group toggle-group--brand" value={["lorem"]}>
  <:item value="lorem">Lorem</:item>
  <:item value="duis">Duis</:item>
  <:item value="donec">Donec</:item>
</.toggle_group>
<.toggle_group class="toggle-group toggle-group--alert" value={["lorem"]}>
  <:item value="lorem">Lorem</:item>
  <:item value="duis">Duis</:item>
  <:item value="donec">Donec</:item>
</.toggle_group>
<.toggle_group class="toggle-group toggle-group--success" value={["lorem"]}>
  <:item value="lorem">Lorem</:item>
  <:item value="duis">Duis</:item>
  <:item value="donec">Donec</:item>
</.toggle_group>
<.toggle_group class="toggle-group toggle-group--info" value={["lorem"]}>
  <:item value="lorem">Lorem</:item>
  <:item value="duis">Duis</:item>
  <:item value="donec">Donec</:item>
</.toggle_group>

  

    <.toggle_group class="toggle-group toggle-group--sm" value={["lorem"]}>
  <:item value="lorem">SM</:item>
  <:item value="duis">SM</:item>
  <:item value="donec">SM</:item>
</.toggle_group>
<.toggle_group class="toggle-group toggle-group--md" value={["lorem"]}>
  <:item value="lorem">MD</:item>
  <:item value="duis">MD</:item>
  <:item value="donec">MD</:item>
</.toggle_group>
<.toggle_group class="toggle-group toggle-group--lg" value={["lorem"]}>
  <:item value="lorem">LG</:item>
  <:item value="duis">LG</:item>
  <:item value="donec">LG</:item>
</.toggle_group>
<.toggle_group class="toggle-group toggle-group--xl" value={["lorem"]}>
  <:item value="lorem">XL</:item>
  <:item value="duis">XL</:item>
  <:item value="donec">XL</:item>
</.toggle_group>

  

    <.toggle_group
  class="toggle-group toggle-group--rounded-none"
  value={["lorem"]}
>
  <:item value="lorem">None</:item>
  <:item value="duis">None</:item>
  <:item value="donec">None</:item>
</.toggle_group>
<.toggle_group class="toggle-group toggle-group--rounded-sm" value={["lorem"]}>
  <:item value="lorem">SM</:item>
  <:item value="duis">SM</:item>
  <:item value="donec">SM</:item>
</.toggle_group>
<.toggle_group class="toggle-group toggle-group--rounded-md" value={["lorem"]}>
  <:item value="lorem">MD</:item>
  <:item value="duis">MD</:item>
  <:item value="donec">MD</:item>
</.toggle_group>
<.toggle_group class="toggle-group toggle-group--rounded-lg" value={["lorem"]}>
  <:item value="lorem">LG</:item>
  <:item value="duis">LG</:item>
  <:item value="donec">LG</:item>
</.toggle_group>
<.toggle_group class="toggle-group toggle-group--rounded-xl" value={["lorem"]}>
  <:item value="lorem">XL</:item>
  <:item value="duis">XL</:item>
  <:item value="donec">XL</:item>
</.toggle_group>
<.toggle_group
  class="toggle-group toggle-group--rounded-full"
  value={["lorem"]}
>
  <:item value="lorem">Full</:item>
  <:item value="duis">Full</:item>
  <:item value="donec">Full</:item>
</.toggle_group>

  

    <.toggle_group class="toggle-group" disabled value={["lorem"]}>
  <:item value="lorem">Lorem</:item>
  <:item value="duis">Duis</:item>
  <:item value="donec">Donec</:item>
</.toggle_group>
<.toggle_group
  class="toggle-group toggle-group--accent"
  disabled
  value={["donec"]}
>
  <:item value="lorem">Lorem</:item>
  <:item value="duis">Duis</:item>
  <:item value="donec">Donec</:item>
</.toggle_group>