<le-checkbox>

Checkbox with label and description! And not much else.

Usage

You can use it in any html form, just like a normal checkbox. The extra here is that you are getting label, aligned correctly with the checkbox, and an optional description.

<le-checkbox name="terms" value="agree">
  I have read and agree to the <a href="/terms">terms and conditions</a>.
  <div slot="description">You must accept the terms and conditions to proceed.</div>
</le-checkbox>

Properties

@name

If you want the checkbox to be part of a form, you can use the name attribute.

@value

The value that will be submitted with the form when the checkbox is checked.

@checked

Whether the checkbox is initially checked or not.

<le-checkbox name="subscribe" value="yes" checked> Subscribe to newsletter </le-checkbox>

@disabled

Whether the checkbox is disabled or not.

<le-checkbox name="option" value="1" disabled> Disabled option </le-checkbox>
<le-checkbox name="option" value="2" checked disabled>Disabled checked option</le-checkbox>

Slots

Default slot

The default slot is used for the label of the checkbox. You can put any HTML content here, and it will be aligned correctly with the checkbox.

description

The description slot is used for the description of the checkbox. It is displayed below the label, and is styled with a smaller font size and a different color.

Example is available on the very top of this page.

Events

change

Uses native-style onchange event behavior.

When the checkbox state changes, a change event is emitted with the following details:

• checked: boolean indicating whether the checkbox is now checked or not.
• value: the value of the checkbox (from the value attribute).
• name: the name of the checkbox (from the name attribute).

It can be used with the onchange attribute in HTML, or with an event listener in JavaScript.

<le-checkbox
  name="check"
  value="works"
  onchange="alert(`Checkbox state was changed: ${event.detail}`)"
>
  Check the box to see the event details in an alert.
</le-checkbox>