Corex · Elixir Phoenix Framework UI Library

Semantic

Use class="ui-{role}" to set the semantic palette of a toggle group.

Available options: accent, alert, brand, info, success

    <.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 ui-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 ui-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 ui-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 ui-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 ui-info" value={["lorem"]}>
  <:item value="lorem">Lorem</:item>
  <:item value="duis">Duis</:item>
  <:item value="donec">Donec</:item>
</.toggle_group>

Size

Use class="ui-size-{size}" to set the size of a toggle group.

Available options: xs, sm, md (default), lg, xl

    <.toggle_group class="toggle-group ui-size-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 ui-size-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 ui-size-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 ui-size-xl" value={["lorem"]}>
  <:item value="lorem">XL</:item>
  <:item value="duis">XL</:item>
  <:item value="donec">XL</:item>
</.toggle_group>

Rounded

Use class="ui-rounded-{step}" to set the corner radius of a toggle group.

Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)

    <.toggle_group
  class="toggle-group ui-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 ui-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 ui-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 ui-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 ui-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 ui-rounded-full"
  value={["lorem"]}
>
  <:item value="lorem">Full</:item>
  <:item value="duis">Full</:item>
  <:item value="donec">Full</:item>
</.toggle_group>

Width

Without w-*, width comes from component CSS. Default for toggle-group: 3xs (width: fit-content).

Use class="w-{step}" to set the host stretch mode of a toggle group (`w-full`, `w-fit`); use Max width for named container steps.

Available options: default (fit-content), full, fit

default (fit-content)

full

fit

    <.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 w-full" value={["lorem"]}>
  <:item value="lorem">Lorem</:item>
  <:item value="duis">Duis</:item>
  <:item value="donec">Donec</:item>

</.toggle_group>

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

</.toggle_group>

Max width

Without max-w-*, width comes from component CSS. Default for toggle-group: 3xs (width: fit-content).

Use class="max-w-{step}" to set the maximum width of a toggle group root.

Available options: none, full, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs (default), 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl

default (3xs)

none

full

9xs

8xs

7xs

6xs

5xs

4xs

3xs

2xs

xs

sm

md

lg

xl

2xl

3xl

4xl

5xl

6xl

7xl

8xl

9xl

    <.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 max-w-none" value={["lorem"]}>
  <:item value="lorem">Lorem</:item>
  <:item value="duis">Duis</:item>
  <:item value="donec">Donec</:item>

</.toggle_group>

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

</.toggle_group>

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

</.toggle_group>

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

</.toggle_group>

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

</.toggle_group>

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

</.toggle_group>

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

</.toggle_group>

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

</.toggle_group>

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

</.toggle_group>

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

</.toggle_group>

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

</.toggle_group>

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

</.toggle_group>

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

</.toggle_group>

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

</.toggle_group>

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

</.toggle_group>

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

</.toggle_group>

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

</.toggle_group>

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

</.toggle_group>

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

</.toggle_group>

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

</.toggle_group>

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

</.toggle_group>

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

</.toggle_group>

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

</.toggle_group>

Disabled

    <.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 ui-accent"
  disabled
  value={["donec"]}
>
  <:item value="lorem">Lorem</:item>
  <:item value="duis">Duis</:item>
  <:item value="donec">Donec</:item>
</.toggle_group>