Checklist
An icon-prefixed list for benefit and feature copy — presentational, not interactive.
When to Use
Use when:
You're listing what something includes — plan features, workshop inclusions, benefit bullets on a marketing page. Each item is a short affirmative phrase.
Don't use when:
The user has to tick things off — nothing here is clickable. For trackable tasks use Task Checklist; for real checkbox input use Checkbox Card Group.
Variants
Default
- Pre-built workshop agendas
- Exercises for every challenge
- AI-powered facilitation coaching
- Drag-and-drop workshop planner
<?= ws_checklist([
'Pre-built workshop agendas',
'Exercises for every challenge',
'AI-powered facilitation coaching',
]) ?>Compact
Tighter vertical rhythm for sidebars, cards, and constrained columns.
- Includes prep mode
- Live session tracking
- Post-session reflection
<?= ws_checklist($items, ['variant' => 'compact']) ?>
Custom icon
Any Material icon replaces the default check. Keep one icon per list — the icon marks the list's character, it doesn't vary by item.
Stars
- Top-rated exercises
- Expert-curated agendas
- Community favourites
Lightning
- Quick 5-min setup
- Instant AI feedback
- Real-time suggestions
<?= ws_checklist($items, ['icon' => 'star']) ?> <?= ws_checklist($items, ['icon' => 'bolt']) ?>
States
| State | Behavior |
|---|---|
| Default | The only state. Items are static <li>s with no hover, focus, checked, or disabled treatment. |
| Empty array | Renders an empty <ul> — invisible but present in the DOM. Guard on the array before calling. |
| Long items | Text wraps and stays aligned; the icon holds its own column rather than sitting inline with the first word. |
Real-World Usage
A pricing tier's inclusion list — compact variant inside the plan card, items pulled from the tier definition so the copy and the entitlement never drift apart.
Pro
Everything in Free, plus:
- Unlimited saved workshops
- AI Coach during live sessions
- Synthesize post-session readouts
- Export to PDF and Miro
<?= ws_checklist($tier['features'], ['variant' => 'compact']) ?>
Options
| Option | Type | Default | Purpose |
|---|---|---|---|
$items | array | required | Positional array of plain strings. Each is escaped, so markup inside an item is shown literally rather than rendered. |
icon | string | 'check_circle' | Material icon name, applied to every item |
variant | string | 'default' | default | compact. Only non-default emits a modifier class. |
id | string | null | Element ID on the <ul> |
class | string | '' | Additional CSS classes |
Accessibility
| Concern | Behavior |
|---|---|
| Semantics | A real <ul> of <li>s, so screen readers announce it as a list with an item count and let users jump between items. No ARIA is needed or added. |
| Keyboard | Not interactive and not focusable — correctly absent from the tab order. |
| Escaping | Item text runs through htmlspecialchars(), so user-supplied strings are safe here. |
| Not a form control | The checkmark is decoration, not state. Never use this list to represent things the user has completed — a screen-reader user has no way to tell a "done" check from a "included" check. |
| Icon announcement | Known gap: the icon <span> has no aria-hidden="true". Material Symbols render from ligature text, so some screen readers read the raw glyph name — "check circle" before every item. Harmless but noisy; worth fixing in the template. |
| Contrast | Icons use --mainsite-primary and text uses --text-default, both tested against the page surface. |
Tokens
| Token | Used for |
|---|---|
--mainsite-primary | Icon colour |
--text-default | Item text |
--space-2 / --space-3 | Icon-to-text gap and the gap between items (tightened by compact) |
--text-body / --text-small / --text-meta / --text-h3 | Type scale across variants |
--font-body | Body face |
CSS Classes
| Class | Purpose |
|---|---|
.ws-checklist | The <ul> — resets list styling and sets the item rhythm |
.ws-checklist--compact | Tighter spacing |
.ws-checklist__item | Each <li> |
.ws-checklist__icon | Leading icon wrapper |
.ws-checklist__text | Item text wrapper |
Files
| File | Purpose |
|---|---|
includes/components/helpers.php | ws_checklist() helper function |
includes/components/checklist.php | Template — list markup and escaping |
includes/components/components.css | Styles (.ws-checklist rules) |