Checkbox Group generator
Multi-select preference lists, filter panels and permission toggles all use lightning-checkbox-group. Style the check color and spacing so a long list of options stays easy to scan.
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-checkbox-group
label="Notify me about"
options={options}
value={value}
class="studio-checkbox-group"
onchange={handleChange}
></lightning-checkbox-group>
</template>Design tips for checkbox groups
- Group related checkboxes under one clear legend rather than several ungrouped boxes.
- Increase option spacing on touch-heavy interfaces so adjacent checkboxes are easy to tap accurately.
- Use horizontal layout only for 2–4 short options; vertical scales far better for longer lists.
Related components
Components developers commonly compare against or pair with Checkbox Group.