Checkbox generator
A single lightning-input checkbox handles agreements, opt-ins and one-off boolean fields where a full checkbox group is overkill. Style the check color and box size so it matches the rest of your form system.
Your changes autosave in this browser, and the link above reproduces this exact configuration for anyone you send it to.
Live preview
Generated code
<template>
<lightning-input
type="checkbox"
label="I agree to the terms"
checked={isChecked}
class="studio-checkbox"
onchange={handleChange}
></lightning-input>
</template>Design tips for checkboxes
- Keep the check color consistent with your primary action color so checked states read as "confirmed," not just "different."
- Left-align the label unless the checkbox sits in a dense table row, where right-aligned labels save horizontal space.
- Never rely on color alone to show checked state — the generated markup always includes a checkmark glyph too.
Related components
Components developers commonly compare against or pair with Checkbox.