Checkbox

Give textual form controls like `<input>`s and `<textarea>`s an upgrade with custom styles, sizing, focus states, and more.

Example

<div class="form">
  <div class="field">
    <div class="inline">
      <input class="checkbox" type="checkbox" id="input1" value=""/>
      <label class="label" for="input1">
        Default checkbox
      </label>
    </div>
    <div class="inline">
      <input class="checkbox" type="checkbox" id="input2" checked/>
      <label class="label" for="input2">
        Default checked checkbox
      </label>
    </div>
  </div>
</div>

@use '~/styles/app.scss' as app;

$form: app.get-theme(app.$theme, 'components.form');
@include app.generate-component(
  $form,
  'form',
  app.$config,
  app.$theme
);

Indeterminate

<div class="form">
  <div class="field">
    <div class="inline">
      <input class="checkbox" type="checkbox" id="input1" value=""/>
      <label class="label" for="input1">
        Default checkbox
      </label>
    </div>
    <p class="text-muted-foreground text-sm">By clicking this checkbox, you agree to the terms and conditions.</p>
  </div>
</div>

@use '~/styles/app.scss' as app;

@include app.generate-component(
  app.get-theme(app.$theme, 'components.form'),
  'form',
  app.$config,
  app.$theme
);

document.getElementById('input1').indeterminate = true;