checkbox-list

A long list of checkboxes with a filter box, select all, clear and a count.

Example

Linked segments

Laravel

<x-admin::checkbox-list name="g_segments" id="g_segments" label="Linked segments" :value="['s2']" :options="[
    's1' => ['label' => 'Early entry', 'description' => '1,204 members'],
    's2' => ['label' => 'Lapsed 2025', 'description' => '312 members'],
    's3' => 'Club members',
    's4' => 'Race kit buyers',
    's5' => 'Recovery sessions',
]" />

Props

PropRequiredDefaultOptions
nameyes
labelnull
hintnull
errornull
idnull
options[]
value[]
filtertrue
select-alltrue
countertrue
placeholdernull
max-height"16rem"
optionalfalse
requiredfalse

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { CheckboxList } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<fieldset class="adm-fieldset adm-checkbox-list" data-adm-checkbox-list >
            <legend class="adm-label">Linked segments</legend>
                <div class="adm-checkbox-list__tools">
            <input type="search" class="adm-input adm-checkbox-list__filter" data-adm-list-filter placeholder="Filter the list" aria-label="Filter the list" autocomplete="off">                            <button type="button" class="adm-btn adm-btn--secondary adm-btn--sm" data-adm-list-all="data-adm-list-all" >Select all</button>
                <button type="button" class="adm-btn adm-btn--secondary adm-btn--sm" data-adm-list-none="data-adm-list-none" >Clear</button>
                        <span class="adm-checkbox-list__count adm-small adm-subtle" aria-live="polite" data-adm-list-count></span>        </div>
        <div class="adm-checkbox-list__items" style="max-height:16rem">
                                <label class="adm-check adm-checkbox-list__item">
                <input type="checkbox" name="g_segments[]" id="g_segments_0" value="s1"  >
                <span><span>Early entry</span><span class="adm-checkbox-list__description">1,204 members</span></span>
            </label>
                                <label class="adm-check adm-checkbox-list__item">
                <input type="checkbox" name="g_segments[]" id="g_segments_1" value="s2" checked >
                <span><span>Lapsed 2025</span><span class="adm-checkbox-list__description">312 members</span></span>
            </label>
                                <label class="adm-check adm-checkbox-list__item">
                <input type="checkbox" name="g_segments[]" id="g_segments_2" value="s3"  >
                <span><span>Club members</span></span>
            </label>
                                <label class="adm-check adm-checkbox-list__item">
                <input type="checkbox" name="g_segments[]" id="g_segments_3" value="s4"  >
                <span><span>Race kit buyers</span></span>
            </label>
                                <label class="adm-check adm-checkbox-list__item">
                <input type="checkbox" name="g_segments[]" id="g_segments_4" value="s5"  >
                <span><span>Recovery sessions</span></span>
            </label>
                <p class="adm-subtle adm-small" data-adm-list-empty hidden>No results</p>
    </div>
        </fieldset>