@pega/sdk 0.0.5 → 0.0.7

package/templates/react-sdk-reference/.ai-common/skills/field-skills/Checkbox.md

@@ -2,7 +2,7 @@
 
 Checkbox field supporting single boolean toggle, multi-selection mode, and optional card-style variant.
 
-> **Prerequisite skill:** [`field-components.md`](../field-components.md) — covers architecture, props interface, display modes, event handling, and registration patterns common to ALL field components.
+> **Prerequisite skill:** [`field-components.md`](../field-components.md) — covers architecture, input contract, display modes, event handling, and registration patterns common to ALL field components.
 
 ---
 
@@ -14,17 +14,15 @@ Renders one or more checkboxes. Supports three usage modes: (1) a single boolean
 
 - **Pega Name:** `Checkbox`
 - **Type / Subtype:** `Field` / `Boolean`
-- **Registration key:** `Checkbox` (mapped to `CheckboxComponent` import in `component-map.ts`)
+- **Registration key:** `Checkbox` (in the project's component map)
 
-## Props (component-specific)
+> **Important naming note:** The component's export name should avoid conflicts with the design system's checkbox widget (e.g., use `CheckboxComponent` as the export name). Register it under the key `Checkbox` in the project's component map.
 
-> Note: `Checkbox` uses `Omit<PConnFieldProps, 'value'>` with its own `value?: boolean`. Import type as:
->
-> ```typescript
-> import type { PConnFieldProps } from '@pega/sdk-react';
-> ```
+## Inputs (component-specific)
 
-| Prop                   | Type                 | Description                                                          |
+> Note: The Checkbox input contract overrides `value` to be a boolean (not a string), while inheriting all other fields from the project's field input contract.
+
+| Name                   | Type                 | Description                                                          |
 | ---------------------- | -------------------- | -------------------------------------------------------------------- |
 | `value`                | `boolean` (optional) | Checked state for single-mode checkbox                               |
 | `caption`              | `string` (optional)  | Label shown next to the single checkbox (not the group label)        |
@@ -39,130 +37,36 @@ Renders one or more checkboxes. Supports three usage modes: (1) a single boolean
 | `referenceList`        | `string`             | Reference list property path                                         |
 | `variant`              | `string` (optional)  | `'card'` — renders options as selectable card grid                   |
 | `hideFieldLabels`      | `boolean`            | Hide field labels inside card variant                                |
-| `additionalProps`      | `any`                | Extra props passed to card or checkbox                               |
+| `additionalProps`      | `any`                | Extra inputs passed to card or checkbox                              |
 | `imagePosition`        | `string`             | Card image position                                                  |
 | `imageSize`            | `string`             | Card image size                                                      |
 | `showImageDescription` | `string`             | Whether to show image description                                    |
-| `renderMode`           | `string`             | `'ReadOnly'` — sets read-only mode alongside `readOnly` prop         |
+| `renderMode`           | `string`             | `'ReadOnly'` — sets read-only mode alongside `readOnly` input        |
 | `image`                | `string`             | Image field path for card variant                                    |
 
-## Component Skeleton
-
-Follow this exact structure. The export name is **`CheckboxComponent`** (not `Checkbox`) to avoid collision with the design system's Checkbox widget.
-
-```typescript
-import { useState, useEffect } from 'react';
-import handleEvent from '../../helpers/event-utils';
-import { getComponentFromRegistry } from '@pega/sdk-react';
-import {
-  insertInstruction,
-  deleteInstruction,
-  updateNewInstuctions,
-} from '../../helpers/instructions-utils';
-import type { PConnFieldProps } from '@pega/sdk-react';
-
-// ── Props interface ──────────────────────────────────────────
-// Note: Omit 'value' from PConnFieldProps — Checkbox uses boolean, not string
-interface CheckboxProps extends Omit<PConnFieldProps, 'value'> {
-  value?: boolean;
-  caption?: string;
-  trueLabel?: string;
-  falseLabel?: string;
-  selectionMode?: string;
-  datasource?: any;
-  selectionKey?: string;
-  selectionList?: any;
-  primaryField: string;
-  readonlyContextList: any;
-  referenceList: string;
-  variant?: string;
-  hideFieldLabels: boolean;
-  additionalProps: any;
-  imagePosition: string;
-  imageSize: string;
-  showImageDescription: string;
-  renderMode: string;
-  image: string;
-}
-
-// ── Styles (design-system agnostic) ──────────────────────────
-// .checkbox-column  → display: flex, flexDirection: column
-// .selectable-card-grid → display: grid, gridTemplateColumns: repeat(auto-fit, minmax(min(100%, 40ch), 1fr)),
-//                          gridAutoRows: 1fr, gap: 0.5rem
-
-// ── Component ────────────────────────────────────────────────
-export default function CheckboxComponent(props: CheckboxProps) {
-  // 1. Registry lookups
-  const FieldValueList = getComponentFromRegistry('FieldValueList');
-  const SelectableCard = getComponentFromRegistry('SelectableCard');
-
-  // 2. Destructure props — note alias: readonlyContextList → selectedvalues
-  const {
-    getPConnect, label, caption, value, readOnly, testId,
-    required, disabled, status, helperText, validatemessage,
-    displayMode, hideLabel, trueLabel, falseLabel,
-    selectionMode, datasource, selectionKey, selectionList,
-    primaryField, referenceList,
-    readonlyContextList: selectedvalues,
-    variant, hideFieldLabels, additionalProps,
-    imagePosition, imageSize, showImageDescription, renderMode, image,
-  } = props;
-
-  // 3. Derived flags
-  const readOnlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY' || readOnly;
-  const helperTextToDisplay = validatemessage || helperText;
-
-  // 4. PConnect setup
-  const thePConn = getPConnect();
-  const actionsApi = thePConn.getActionsApi();
-  const propName = (thePConn.getStateProps() as any).value;
-
-  // 5. State
-  const [checked, setChecked] = useState<any>(false);
-
-  // 6. useEffect: sync checked state from value prop — deps: [value]
-  useEffect(() => { setChecked(value); }, [value]);
-
-  // 7. useEffect: init reference list on mount — deps: [thePConn]
-  //    Guard: referenceList?.length > 0 && !readOnlyMode
-  //    Calls: thePConn.setReferenceList(selectionList)
-  //           updateNewInstuctions(thePConn, selectionList)
-
-  // 8. Display mode returns (uses caption, not label!)
-  if (displayMode === 'DISPLAY_ONLY') {
-    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />;
-  }
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    return <FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} variant="stacked" />;
-  }
-
-  // 9. Event handlers — see Behavioral Contract for each variant
-
-  // 10. Branch: card variant (variant === 'card')
-  //     → see Behavioral Contract "Card" section
-  //     Return early with heading + grid + SelectableCard
-
-  // 11. Branch: multi-select (selectionMode === 'multi')
-  //     → see Behavioral Contract "Multi-select" section
-  //     Build list of checkbox controls from datasource.source
-
-  // 12. Branch: single checkbox (default)
-  //     → see Behavioral Contract "Single checkbox" section
-  //     Single FormControlLabel with checked={checked}
-
-  // 13. Main return: wrapper with group label + checkbox(es) + helper text
-  //     Error state: status === 'error'
-  //     Group label: {label}, hidden if hideLabel
-  //     Helper text: helperTextToDisplay
-  return (
-    <FormWrapper required={required} error={status === 'error'}>
-      {!hideLabel && <GroupLabel>{label}</GroupLabel>}
-      <CheckboxGroup>{/* theCheckbox from step 11 or 12 */}</CheckboxGroup>
-      <HelperText>{helperTextToDisplay}</HelperText>
-    </FormWrapper>
-  );
-}
-```
+## Implementation Structure
+
+Follow this exact structure. The export name should avoid collision with the design system's checkbox widget.
+
+**Module Setup:** The component depends on the project's component registry (to resolve `FieldValueList` and `SelectableCard`), the project's event-commit utility, and the project's instruction helpers (`insertInstruction`, `deleteInstruction`, `updateNewInstuctions`) for multi-selection reference list management. Define the input contract by overriding `value` to be an optional boolean (rather than the string from the base field input contract) and adding all the component-specific fields listed in the inputs table above.
+
+**Styling notes (design-system agnostic):** a vertical checkbox column layout (flex, column direction), and for the card variant a CSS grid layout (`repeat(auto-fit, minmax(min(100%, 40ch), 1fr))`, equal row heights, small gap).
+
+**Main Component Logic** — steps in order:
+
+1. **Registry lookups** — resolve `FieldValueList` and `SelectableCard` via the project's component registry.
+2. **Receive inputs** — all the standard field inputs plus the component-specific ones; notably alias `readonlyContextList` to `selectedvalues` for readability.
+3. **Derived flags** — `readOnlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY' || readOnly` and `helperTextToDisplay = validatemessage || helperText`.
+4. **PConnect setup** — obtain the PConnect instance, its actions API, and the bound property name.
+5. **Local state** — `checked` initialized to `false`.
+6. **Sync from store** — a lifecycle effect watching `value` updates `checked` whenever it changes.
+7. **Reference list init** — a lifecycle effect watching the PConnect instance: when `referenceList?.length > 0 && !readOnlyMode`, call `thePConn.setReferenceList(selectionList)` followed by `updateNewInstuctions(thePConn, selectionList)`.
+8. **Display mode returns** — note these use `caption` (not `label`) as the display name: `DISPLAY_ONLY` and `STACKED_LARGE_VAL` both return `FieldValueList` with value set to `trueLabel` when `value` is true, `falseLabel` otherwise, the latter with a stacked variant.
+9. **Event handlers** — see the Behavioral Contract below for the exact logic of each variant's change/blur handlers.
+10. **Branch: card variant** (`variant === 'card'`) — return early with a heading, a CSS grid wrapper, and a `SelectableCard`; see the Behavioral Contract "Card" section for full input wiring.
+11. **Branch: multi-select** (`selectionMode === 'multi'`) — build a list of checkbox controls from `datasource.source`; see the Behavioral Contract "Multi-select" section.
+12. **Branch: single checkbox** (default) — a single checkbox control with `checked` state; see the Behavioral Contract "Single checkbox" section.
+13. **Main return** — a wrapper containing (in order): the group label (`label`, hidden when `hideLabel`), the checkbox group content built in step 11 or 12, and the helper text (`helperTextToDisplay`); the wrapper carries `required` and an error state driven by `status === 'error'`.
 
 ## Behavioral Contract
 
@@ -170,189 +74,116 @@ export default function CheckboxComponent(props: CheckboxProps) {
 
 1. **Read-only determination:** `readOnlyMode = renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY' || readOnly`.
 2. **Helper text:** `helperTextToDisplay = validatemessage || helperText`.
-3. **Local state:** Maintain `checked` (boolean) initialized to `false`. `useEffect` watching `[value]` → `setChecked(value)`.
-4. **Reference list init:** `useEffect` watching `[thePConn]` — if `referenceList?.length > 0 && !readOnlyMode`, call `thePConn.setReferenceList(selectionList)` and `updateNewInstuctions(thePConn, selectionList)`.
-5. **`handleCheckboxChange(event, item)`** — shared by card and internally:
-   ```
-   if (event.target.checked) {
-     insertInstruction(thePConn, selectionList, selectionKey, primaryField, item);
-   } else {
-     deleteInstruction(thePConn, selectionList, selectionKey, item);
-   }
-   thePConn.clearErrorMessages({ property: selectionList });
-   ```
+3. **Local state:** Maintain `checked` (boolean) initialized to `false`. A lifecycle effect watching `value` updates `checked`.
+4. **Reference list init:** A lifecycle effect watching the PConnect instance — if `referenceList?.length > 0 && !readOnlyMode`, call `thePConn.setReferenceList(selectionList)` and `updateNewInstuctions(thePConn, selectionList)`.
+5. **`handleCheckboxChange(event, item)`** — shared by card and internal usage: when the checkbox is checked, call `insertInstruction(thePConn, selectionList, selectionKey, primaryField, item)`; otherwise call `deleteInstruction(thePConn, selectionList, selectionKey, item)`. Either way, finish by calling `thePConn.clearErrorMessages({ property: selectionList })`.
 
 ### Variant: Single checkbox (default)
 
 Render a single checkbox with:
 
-- `checked={checked}`
-- `onChange={!readOnly ? handleChange : undefined}`
-- `onBlur={!readOnly ? handleBlur : undefined}`
+- Checked state bound to `checked`
+- Change handler wired only when not read-only
+- Blur handler wired only when not read-only
 - Label = `caption` (next to checkbox)
 - Group label = `label` (above, hidden if `hideLabel`)
-- **On change:** `handleEvent(actionsApi, 'changeNblur', propName, event.target.checked)` — passes boolean.
-- **On blur:** `pConn.getValidationApi().validate(event.target.checked)`.
+- **On change:** Commit via the project's event-commit utility with event type `'changeNblur'`, the property name, and the checked boolean.
+- **On blur:** Validate via `pConn.getValidationApi().validate(event.target.checked)`.
 
 ### Variant: Multi-select (`selectionMode === 'multi'`)
 
 Render a list of checkboxes from `datasource.source`:
 
-- Extract `dataField`: `selectionKey?.split?.('.')[1]`.
-- For each `element` in `datasource.source`:
-  - `checked`: `selectedvalues?.some?.(data => data[dataField] === element.key)`
+- Extract the data field key: the second segment of `selectionKey` split by `.`.
+- For each element in `datasource.source`:
+  - Checked: `selectedvalues?.some?.(data => data[dataField] === element.key)`
   - Label: `element.text ?? element.value`
-  - **On change:** `handleChangeMultiMode(event, element)`:
-    ```
-    if (event.target.checked) {
-      insertInstruction(thePConn, selectionList, selectionKey, primaryField, {
-        id: element.key,
-        primary: element.text ?? element.value,
-      });
-    } else {
-      deleteInstruction(thePConn, selectionList, selectionKey, {
-        id: element.key,
-        primary: element.text ?? element.value,
-      });
-    }
-    thePConn.clearErrorMessages({ property: selectionList, category: '', context: '' });
-    ```
+  - **On change:** When the checkbox is checked, call `insertInstruction(thePConn, selectionList, selectionKey, primaryField, { id: element.key, primary: element.text ?? element.value })`; otherwise call `deleteInstruction(thePConn, selectionList, selectionKey, { id: element.key, primary: element.text ?? element.value })`. Either way, finish by calling `thePConn.clearErrorMessages({ property: selectionList, category: '', context: '' })`.
   - **On blur:** `thePConn.getValidationApi().validate(selectedvalues, selectionList)`
-  - `data-testid`: `${testId}:${element.value}`
-- Layout: vertical column (`display: flex, flexDirection: column`).
+  - Test id: `${testId}:${element.value}`
+- Layout: vertical column (flex, column direction).
 
 ### Variant: Card (`variant === 'card'`)
 
 Return early (before multi/single logic) with heading + CSS Grid + `SelectableCard`:
 
-- Build `commonProps`:
-  ```
-  const actions = thePConn.getActionsApi();
-  const commonProps = {
-    ...additionalProps,
-    className: 'standard',
-    disabled,
-    readOnly,
-    onClick: (actions as any).onClick,
-  };
-  ```
-- Grid: `repeat(auto-fit, minmax(min(100%, 40ch), 1fr))`, `gridAutoRows: '1fr'`, `gap: '0.5rem'`.
-- `SelectableCard` props:
-  - `{...commonProps}`, `testId`, `displayMode`, `getPConnect`
+- Build common configuration by spreading `additionalProps` and adding `className: 'standard'`, `disabled`, `readOnly`, and `onClick` taken from the PConnect actions API.
+- Grid: `repeat(auto-fit, minmax(min(100%, 40ch), 1fr))`, equal row heights, gap `0.5rem`.
+- `SelectableCard` inputs:
+  - Common configuration spread, `testId`, `displayMode`, `getPConnect`
   - `type='checkbox'`
-  - `dataSource={datasource}`
-  - `readOnly={renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY' || readOnly}`
-  - `recordKey={selectionKey?.split('.').pop()}`
-  - `cardLabel={primaryField.split('.').pop()}`
-  - `readOnlyList={selectedvalues}`
-  - `hideFieldLabels={hideFieldLabels}`
-  - `showNoValue={(readOnlyMode) && selectedvalues.length === 0}`
-  - `image` config object:
-    ```
-    image={{
-      imagePosition,
-      imageSize,
-      showImageDescription,
-      imageField: image?.split('.').pop(),
-      imageDescription: (thePConn?.getRawMetadata()?.config as any)
-        .imageDescription?.split('.').pop(),
-    }}
-    ```
-  - `onChange`: stop propagation, find item from `datasource.source` by matching `item[recordKey] === e.target.id`, call `handleCheckboxChange`:
-    ```
-    onChange={(e) => {
-      e.stopPropagation();
-      const recordKey = selectionKey?.split('.').pop();
-      const selectedItem = datasource?.source?.find(
-        item => item[recordKey] === e.target.id
-      ) ?? {};
-      handleCheckboxChange(e, {
-        id: selectedItem[recordKey],
-        primary: selectedItem[recordKey],
-      });
-    }}
-    ```
+  - `dataSource` set to `datasource`
+  - `readOnly` set to `renderMode === 'ReadOnly' || displayMode === 'DISPLAY_ONLY' || readOnly`
+  - `recordKey` set to the last segment of `selectionKey`
+  - `cardLabel` set to the last segment of `primaryField`
+  - `readOnlyList` set to `selectedvalues`
+  - `hideFieldLabels`
+  - `showNoValue` set to true when read-only mode is active and `selectedvalues.length === 0`
+  - `image` config object bundling `imagePosition`, `imageSize`, `showImageDescription`, an `imageField` derived by taking the last segment of the `image` input path, and an `imageDescription` derived by taking the last segment of the `imageDescription` path found on `thePConn.getRawMetadata().config`.
+  - `onChange`: stop event propagation, resolve the record key by taking the last segment of `selectionKey`, find the matching item in `datasource.source` whose field at that key equals the event target's `id` (defaulting to an empty object if not found), then call `handleCheckboxChange` with an item shaped as `{ id: selectedItem[recordKey], primary: selectedItem[recordKey] }`.
   - `onBlur`: `() => thePConn.getValidationApi().validate(selectedvalues, selectionList)`
 
 ## Display Mode Rendering
 
-Display mode uses `caption` (not `label`) and shows true/false label:
+Display mode uses `caption` (not `label`) and shows the true/false label:
 
-- **`DISPLAY_ONLY`:** `<FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} />`
-- **`STACKED_LARGE_VAL`:** `<FieldValueList name={hideLabel ? '' : caption} value={value ? trueLabel : falseLabel} variant='stacked' />`
+- **`DISPLAY_ONLY`:** Render `FieldValueList` with `name` set to `caption` (or empty when `hideLabel` is true) and `value` set to `trueLabel` when `value` is true, `falseLabel` otherwise.
+- **`STACKED_LARGE_VAL`:** Render `FieldValueList` the same way, with a stacked variant.
 
 ## Read-Only Rendering
 
-Single mode: Set `readOnly` on checkbox element; disable `onChange`/`onBlur`.
-Multi/Card mode: `readOnlyMode` flag prevents `insertInstruction`/`deleteInstruction`; cards show `readOnlyList`.
+Single mode: Set the read-only attribute on the checkbox element; disable the change/blur handlers.
+Multi/Card mode: The `readOnlyMode` flag prevents `insertInstruction`/`deleteInstruction`; cards show `readOnlyList`.
 
 ## Visual Specifications
 
 ### Standard / Multi-select
 
-| Property          | Value                                         |
-| ----------------- | --------------------------------------------- |
-| Checkbox size     | Default (24px)                                |
-| Label placement   | End (right of checkbox)                       |
-| Group label       | `<legend>` above group, hidden if `hideLabel` |
-| Layout            | Single: single row. Multi: vertical column    |
-| Helper text       | Below group                                   |
-| Error state       | Red text/border on helper                     |
-| Disabled/readOnly | Greyed out, pointer-events none               |
-
-**CSS-only:**
-
-```css
-.checkbox-group {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.checkbox-label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-}
-input[type='checkbox']:disabled {
-  opacity: 0.38;
-}
-```
+| Property          | Value                                           |
+| ----------------- | ----------------------------------------------- |
+| Checkbox size     | Default (24px)                                  |
+| Label placement   | End (right of checkbox)                         |
+| Group label       | Legend/label above group, hidden if `hideLabel` |
+| Layout            | Single: single row. Multi: vertical column      |
+| Helper text       | Below group                                     |
+| Error state       | Red text/border on helper                       |
+| Disabled/readOnly | Greyed out, pointer-events none                 |
+
+**Visual-only styling notes:** The checkbox group uses a vertical flex column with a small gap between items; each checkbox label row is a flex container with center-aligned items, a small gap between the input and text, and a pointer cursor. Disabled checkbox inputs are shown at reduced opacity.
 
 ### Card Variant
 
 | Property | Value                                                                                             |
 | -------- | ------------------------------------------------------------------------------------------------- |
 | Layout   | CSS Grid `repeat(auto-fit, minmax(min(100%, 40ch), 1fr))`, row height equal (`1fr`), gap `0.5rem` |
-| Heading  | `<h4>` with `marginTop: 0, marginBottom: 0`                                                       |
+| Heading  | Heading element with no top/bottom margin                                                         |
 
 ## Edge Cases & Special Logic
 
-- **Export name is `CheckboxComponent`** (not `Checkbox`) to avoid collision with the design system's checkbox widget import.
+- **Export name should avoid collision** with the design system's checkbox widget.
 - **Display mode uses `caption`** (not `label`) for the field name. This is unique to Checkbox.
-- **`readonlyContextList`** is destructured with alias `selectedvalues` — use `selectedvalues` everywhere in the component body.
-- **`handleCheckboxChange`** (card mode): Calls `e.stopPropagation()` before processing. Finds the selected item from `datasource.source` by matching `item[recordKey] === e.target.id`.
+- **`readonlyContextList`** is aliased to `selectedvalues` — use `selectedvalues` everywhere in the component body.
+- **`handleCheckboxChange`** (card mode): Stops event propagation before processing. Finds the selected item from `datasource.source` by matching `item[recordKey] === e.target.id`.
 - `updateNewInstuctions` is called on mount to sync reference list state.
 - `clearErrorMessages` is called after every multi-select change.
 - Card variant returns early (before multi/single branch logic).
-- Multi-select `onBlur` validates with both `selectedvalues` and `selectionList` as arguments.
+- Multi-select blur handler validates with both `selectedvalues` and `selectionList` as arguments.
 
 ## Dependencies
 
-- `insertInstruction`, `deleteInstruction`, `updateNewInstuctions` from `../../helpers/instructions-utils` — for multi-selection reference list management.
-- `handleEvent` from `../../helpers/event-utils`.
-- `getComponentFromRegistry('FieldValueList')` for display modes.
-- `getComponentFromRegistry('SelectableCard')` for card variant.
+- The project's instruction helpers (`insertInstruction`, `deleteInstruction`, `updateNewInstuctions`) — for multi-selection reference list management.
+- The project's event-commit utility.
+- The project's component registry, resolving `FieldValueList` — for display modes.
+- The project's component registry, resolving `SelectableCard` — for card variant.
 
 ## Design System Mapping
 
 **UI control type:** Single or multi-select checkbox (boolean or list).
 
-Listed design systems are examples only.
+When implementing in a specific design system, map the following:
 
-| Design System      | Recommended Component                               |
-| ------------------ | --------------------------------------------------- |
-| Default (CSS only) | `<input type="checkbox">` with `<label>`            |
-| MUI                | `<Checkbox>` in `<FormControlLabel>`, `<FormGroup>` |
-| Ant Design         | `<Checkbox>` / `<Checkbox.Group>`                   |
-| Chakra UI          | `<Checkbox>` / `<CheckboxGroup>`                    |
+- **Single checkbox** → use the DS's checkbox component with a label to the right
+- **Multi-select** → render a list of checkboxes in a vertical flex column
+- **Card variant** → delegate to the `SelectableCard` component in a CSS grid
+- **Group wrapper** → use the DS's form control/form group with legend/label, error state, and helper text
+- **Read-only** → disable the checkbox inputs; for cards, show the read-only list