Checkbox · Styling

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

  

    <.checkbox class="checkbox checkbox--sm">
  <:label>Small</:label>
</.checkbox>
<.checkbox class="checkbox">
  <:label>Default</:label>
</.checkbox>
<.checkbox class="checkbox checkbox--lg">
  <:label>Large</:label>
</.checkbox>
<.checkbox class="checkbox checkbox--xl">
  <:label>XLarge</:label>
</.checkbox>