Bulk Selection

The data-select-all attribute creates a master checkbox that controls a group of related checkboxes. It supports:

• Check/uncheck all targets at once
• Indeterminate state when some items are selected
• Selected count display
• Custom events for building action bars

The most common pattern: a header checkbox that controls row checkboxes in a table.

Use data-select-all-scope to limit the scope. The master checkbox finds targets within the closest scope container.

Listen to the select-all:change event to show/hide a bulk actions toolbar.

• The data-select-all value is a CSS selector for the target checkboxes
• Scope is determined by the closest table, form, fieldset, or [data-select-all-scope] ancestor
• The data-selected-count element (within scope) auto-updates with the count
• The select-all:change event fires on the master checkbox with detail: { checked, total, selected }