Checkbox

Style

Semantic colors, density, and corner radius via modifier classes on the checkbox root.

Hex doc

Phoenix

Semantic

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

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

Default

Accent

Brand

Alert

Info

Success

    <.checkbox class="checkbox" checked>
  <:label>Default</:label>
  <:indicator>
    <.heroicon name="hero-check" />
  </:indicator>
  <:indeterminate>
    <.heroicon name="hero-minus" />
  </:indeterminate>
</.checkbox>
<.checkbox class="checkbox ui-accent" checked>
  <:label>Accent</:label>
  <:indicator>
    <.heroicon name="hero-check" />
  </:indicator>
  <:indeterminate>
    <.heroicon name="hero-minus" />
  </:indeterminate>
</.checkbox>
<.checkbox class="checkbox ui-brand" checked>
  <:label>Brand</:label>
  <:indicator>
    <.heroicon name="hero-check" />
  </:indicator>
  <:indeterminate>
    <.heroicon name="hero-minus" />
  </:indeterminate>
</.checkbox>
<.checkbox class="checkbox ui-alert" checked>
  <:label>Alert</:label>
  <:indicator>
    <.heroicon name="hero-check" />
  </:indicator>
  <:indeterminate>
    <.heroicon name="hero-minus" />
  </:indeterminate>
</.checkbox>
<.checkbox class="checkbox ui-info" checked>
  <:label>Info</:label>
  <:indicator>
    <.heroicon name="hero-check" />
  </:indicator>
  <:indeterminate>
    <.heroicon name="hero-minus" />
  </:indeterminate>
</.checkbox>
<.checkbox class="checkbox ui-success" checked>
  <:label>Success</:label>
  <:indicator>
    <.heroicon name="hero-check" />
  </:indicator>
  <:indeterminate>
    <.heroicon name="hero-minus" />
  </:indeterminate>
</.checkbox>

Size

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

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

Small

Medium

Large

XLarge

    <.checkbox class="checkbox ui-size-sm">
  <:label>Small</:label>
  <:indicator>
    <.heroicon name="hero-check" />
  </:indicator>
</.checkbox>
<.checkbox class="checkbox">
  <:label>Default</:label>
  <:indicator>
    <.heroicon name="hero-check" />
  </:indicator>
</.checkbox>
<.checkbox class="checkbox ui-size-lg">
  <:label>Large</:label>
  <:indicator>
    <.heroicon name="hero-check" />
  </:indicator>
</.checkbox>
<.checkbox class="checkbox ui-size-xl">
  <:label>XLarge</:label>
  <:indicator>
    <.heroicon name="hero-check" />
  </:indicator>
</.checkbox>

Rounded

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

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

None

Full

    <.checkbox class="checkbox ui-rounded-none" checked>
  <:label>None</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>
<.checkbox class="checkbox ui-rounded-sm" checked>
  <:label>SM</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>
<.checkbox class="checkbox ui-rounded-md" checked>
  <:label>MD</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>
<.checkbox class="checkbox ui-rounded-lg" checked>
  <:label>LG</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>
<.checkbox class="checkbox ui-rounded-xl" checked>
  <:label>XL</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>
<.checkbox class="checkbox ui-rounded-full" checked>
  <:label>Full</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>

Max width

Without max-w-*, width comes from component CSS. Default for checkbox: none (width: 100%).

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

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

    <.checkbox id="checkbox-style-max-default" class="checkbox" checked>
  <:label>Save changes to your account settings</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>

<.checkbox id="checkbox-style-max-none" class="checkbox max-w-none" checked>
  <:label>Save changes to your account settings</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>

<.checkbox id="checkbox-style-max-full" class="checkbox max-w-full" checked>
  <:label>Save changes to your account settings</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>

<.checkbox id="checkbox-style-max-9xs" class="checkbox max-w-9xs" checked>
  <:label>Save changes to your account settings</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>

<.checkbox id="checkbox-style-max-8xs" class="checkbox max-w-8xs" checked>
  <:label>Save changes to your account settings</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>

<.checkbox id="checkbox-style-max-7xs" class="checkbox max-w-7xs" checked>
  <:label>Save changes to your account settings</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>

<.checkbox id="checkbox-style-max-6xs" class="checkbox max-w-6xs" checked>
  <:label>Save changes to your account settings</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>

<.checkbox id="checkbox-style-max-5xs" class="checkbox max-w-5xs" checked>
  <:label>Save changes to your account settings</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>

<.checkbox id="checkbox-style-max-4xs" class="checkbox max-w-4xs" checked>
  <:label>Save changes to your account settings</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>

<.checkbox id="checkbox-style-max-3xs" class="checkbox max-w-3xs" checked>
  <:label>Save changes to your account settings</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>

<.checkbox id="checkbox-style-max-2xs" class="checkbox max-w-2xs" checked>
  <:label>Save changes to your account settings</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>

<.checkbox id="checkbox-style-max-xs" class="checkbox max-w-xs" checked>
  <:label>Save changes to your account settings</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>

<.checkbox id="checkbox-style-max-sm" class="checkbox max-w-sm" checked>
  <:label>Save changes to your account settings</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>

<.checkbox id="checkbox-style-max-md" class="checkbox max-w-md" checked>
  <:label>Save changes to your account settings</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>

<.checkbox id="checkbox-style-max-lg" class="checkbox max-w-lg" checked>
  <:label>Save changes to your account settings</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>

<.checkbox id="checkbox-style-max-xl" class="checkbox max-w-xl" checked>
  <:label>Save changes to your account settings</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>

<.checkbox id="checkbox-style-max-2xl" class="checkbox max-w-2xl" checked>
  <:label>Save changes to your account settings</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>

<.checkbox id="checkbox-style-max-3xl" class="checkbox max-w-3xl" checked>
  <:label>Save changes to your account settings</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>

<.checkbox id="checkbox-style-max-4xl" class="checkbox max-w-4xl" checked>
  <:label>Save changes to your account settings</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>

<.checkbox id="checkbox-style-max-5xl" class="checkbox max-w-5xl" checked>
  <:label>Save changes to your account settings</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>

<.checkbox id="checkbox-style-max-6xl" class="checkbox max-w-6xl" checked>
  <:label>Save changes to your account settings</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>

<.checkbox id="checkbox-style-max-7xl" class="checkbox max-w-7xl" checked>
  <:label>Save changes to your account settings</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>

<.checkbox id="checkbox-style-max-8xl" class="checkbox max-w-8xl" checked>
  <:label>Save changes to your account settings</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>

<.checkbox id="checkbox-style-max-9xl" class="checkbox max-w-9xl" checked>
  <:label>Save changes to your account settings</:label>
  <:indicator><.heroicon name="hero-check" /></:indicator>
</.checkbox>