Switch

Style

Semantic colors and density via modifier classes on the root.

Hex doc

Phoenix

Semantic

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

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

    <.switch class="switch" checked>
  <:label>Default</:label>
</.switch>
<.switch class="switch ui-accent" checked>
  <:label>Accent</:label>
</.switch>
<.switch class="switch ui-brand" checked>
  <:label>Brand</:label>
</.switch>
<.switch class="switch ui-alert" checked>
  <:label>Alert</:label>
</.switch>
<.switch class="switch ui-info" checked>
  <:label>Info</:label>
</.switch>
<.switch class="switch ui-success" checked>
  <:label>Success</:label>
</.switch>

Size

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

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

    <.switch class="switch ui-size-sm" checked>
  <:label>SM</:label>
</.switch>
<.switch class="switch ui-size-md" checked>
  <:label>MD</:label>
</.switch>
<.switch class="switch ui-size-lg" checked>
  <:label>LG</:label>
</.switch>
<.switch class="switch ui-size-xl" checked>
  <:label>XL</:label>
</.switch>

Width

Without w-*, width comes from component CSS. Default for switch: fit-content (width: fit-content).

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

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

default (fit-content)

full

fit

    <.switch class="switch" checked>
  <:label>Save changes to your account settings</:label>

</.switch>

<.switch class="switch w-full" checked>
  <:label>Save changes to your account settings</:label>

</.switch>

<.switch class="switch w-fit" checked>
  <:label>Save changes to your account settings</:label>

</.switch>

Max width

Without max-w-*, width comes from component CSS. Default for switch: fit-content (width: fit-content).

Use class="max-w-{step}" to show a capped full-width control on fit-content hosts (pair w-full with max-w-* and wide content when labels are short).

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

    <.switch class="switch w-full" checked>
  <:label>Save changes to your account settings</:label>

</.switch>

<.switch class="switch w-full max-w-none" checked>
  <:label>Save changes to your account settings</:label>

</.switch>

<.switch class="switch w-full max-w-full" checked>
  <:label>Save changes to your account settings</:label>

</.switch>

<.switch class="switch w-full max-w-9xs" checked>
  <:label>Save changes to your account settings</:label>

</.switch>

<.switch class="switch w-full max-w-8xs" checked>
  <:label>Save changes to your account settings</:label>

</.switch>

<.switch class="switch w-full max-w-7xs" checked>
  <:label>Save changes to your account settings</:label>

</.switch>

<.switch class="switch w-full max-w-6xs" checked>
  <:label>Save changes to your account settings</:label>

</.switch>

<.switch class="switch w-full max-w-5xs" checked>
  <:label>Save changes to your account settings</:label>

</.switch>

<.switch class="switch w-full max-w-4xs" checked>
  <:label>Save changes to your account settings</:label>

</.switch>

<.switch class="switch w-full max-w-3xs" checked>
  <:label>Save changes to your account settings</:label>

</.switch>

<.switch class="switch w-full max-w-2xs" checked>
  <:label>Save changes to your account settings</:label>

</.switch>

<.switch class="switch w-full max-w-xs" checked>
  <:label>Save changes to your account settings</:label>

</.switch>

<.switch class="switch w-full max-w-sm" checked>
  <:label>Save changes to your account settings</:label>

</.switch>

<.switch class="switch w-full max-w-md" checked>
  <:label>Save changes to your account settings</:label>

</.switch>

<.switch class="switch w-full max-w-lg" checked>
  <:label>Save changes to your account settings</:label>

</.switch>

<.switch class="switch w-full max-w-xl" checked>
  <:label>Save changes to your account settings</:label>

</.switch>

<.switch class="switch w-full max-w-2xl" checked>
  <:label>Save changes to your account settings</:label>

</.switch>

<.switch class="switch w-full max-w-3xl" checked>
  <:label>Save changes to your account settings</:label>

</.switch>

<.switch class="switch w-full max-w-4xl" checked>
  <:label>Save changes to your account settings</:label>

</.switch>

<.switch class="switch w-full max-w-5xl" checked>
  <:label>Save changes to your account settings</:label>

</.switch>

<.switch class="switch w-full max-w-6xl" checked>
  <:label>Save changes to your account settings</:label>

</.switch>

<.switch class="switch w-full max-w-7xl" checked>
  <:label>Save changes to your account settings</:label>

</.switch>

<.switch class="switch w-full max-w-8xl" checked>
  <:label>Save changes to your account settings</:label>

</.switch>

<.switch class="switch w-full max-w-9xl" checked>
  <:label>Save changes to your account settings</:label>

</.switch>