チェックリストCheckListExperimental

A checklist / confirmable list: rows of a leading checkbox + label + description with a trailing slot (status badge, action, amount), bordered and divider-separated, each checkbox carrying the row label as its accessible name. Rows with no checked render as plain display rows. For document checklists, required-step / associated-procedure lists, recall/return scope confirmation, batch-approval pick lists and any 'tick these, see their status' surface. (For single/multi selection with roving keyboard nav — inbox / master-detail — that's a separate ListBox primitive.)

プレビュー

  • 本人確認書類（運転免許証等）
    確認済
  • 転出証明書前住所地の市区町村が発行
    未確認
  • マイナンバーカード / 通知カード
    未確認
  • 印鑑（世帯主分）
    未確認

必要書類: 1 / 4 確認済

Props

表は横にスクロールできます
プロパティ型初期値説明
itemsCheckListItem[]-Rows: { id, label, description?, trailing?, checked?, disabled? }. Omit checked for a non-checkable display row.
onCheckedChange(id: string, checked: boolean) => void-Called when a row's checkbox toggles.
CheckListItem.trailingReactNode-Right-aligned content (status Badge, action, amount) — outside the toggle so clicking it doesn't flip the checkbox.
CheckListItem.checkedboolean-Controlled checked state. Omit → a plain display row (label/description + trailing, no checkbox).
classNamestring-Additional CSS class names on the <ul>.

Usage

import { CheckList, Badge, type CheckListItem } from "@gunjo/ui"

const items: CheckListItem[] = [
  {
    id: "id",
    label: "本人確認書類（運転免許証等）",
    checked: true,
    trailing: <Badge variant="success" icon={<IconCheck />}>確認済</Badge>,
  },
  {
    id: "former",
    label: "転出証明書",
    description: "前住所地の市区町村が発行",
    checked: false,
    trailing: <Badge variant="warning">未確認</Badge>,
  },
  // a row with no `checked` renders as a plain display row (no checkbox)
  { id: "note", label: "備考", description: "世帯主のみ来庁" },
]

<CheckList items={items} onCheckedChange={(id, checked) => toggle(id, checked)} />

使用コンポーネント

CheckboxBadge