Selection List

A selectable list of rows (single- or multi-select), each with a leading Checkbox/Radio indicator that mirrors row state.

Real use · single-select plan picker

Multi-select · notification channels

Using Selection List

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path ships no JavaScript, so Selection List is styled but inert: its behavior comes from selection-list. For that behavior with no framework, use the node-tree path below.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class selection-list, with 5 modifiers:

.selection-list
.selection-list-item
.selection-list-item-body
.selection-list-item-description
.selection-list-item-icon
.selection-list-item-label

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { SelectionList } from "@wizeworks/silicaui-react";

Props

Prop	Type	Required	Description
items	SelectionListItem[]	yes	The row data.
multiple	boolean	no	Allow more than one row selected at once. Default false (single-select).
value	string[]	no	Controlled array of selected ids.
defaultValue	string[]	no	Uncontrolled initial selected ids.
onValueChange	(value: string[]) => void	no	Fires with the new array of selected ids.

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

Show source

import { useState } from "react";
import { SelectionList } from "@wizeworks/silicaui-react";
import type { SelectionListItem } from "@wizeworks/silicaui-react";
import { Section, Row } from "../lib/Section";

const PlanIcon = (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
        <rect width="18" height="18" x="3" y="3" rx="2" />
        <path d="M3 9h18" />
    </svg>
);

const PLANS: SelectionListItem[] = [
    { id: "free", label: "Free", description: "For trying things out", icon: PlanIcon },
    { id: "pro", label: "Pro", description: "For growing teams", icon: PlanIcon },
    { id: "enterprise", label: "Enterprise", description: "Custom limits & support", icon: PlanIcon },
];

const NOTIFICATIONS: SelectionListItem[] = [
    { id: "email", label: "Email", description: "Order + shipping updates" },
    { id: "sms", label: "SMS", description: "Delivery alerts only" },
    { id: "push", label: "Push", description: "Real-time on this device" },
    { id: "digest", label: "Weekly digest", description: "Coming soon", disabled: true },
];

export function SelectionListDemo() {
    const [plan, setPlan] = useState<string[]>(["pro"]);
    const [channels, setChannels] = useState<string[]>(["email", "push"]);

    return (
        <>
            <Section title="Real use · single-select plan picker">
                <Row>
                    <SelectionList
                        items={PLANS}
                        value={plan}
                        onValueChange={setPlan}
                        className="w-72"
                    />
                </Row>
            </Section>

            <Section title="Multi-select · notification channels">
                <Row>
                    <SelectionList
                        items={NOTIFICATIONS}
                        multiple
                        value={channels}
                        onValueChange={setChannels}
                        className="w-72"
                    />
                </Row>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

SelectionList — a selectable listbox (single- or multi-select), items driven by props (not authored children, like Breadcrumb/Steps). Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("SelectionList", "selection-list", { /* props */ });
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "selection-list selection-list-primary" rather than passing a colour as a prop.

Takes children: no
Hydrated by: selection-list

Load @wizeworks/silicaui-behaviors on the page or this markup renders correctly and does nothing.

The full API for Selection List, on every path, is available through the Silica MCP server.