Cognitive Biases / Commitment
Commitment
Progressive multi-step reveal. Children with [data-step="N"] appear only when step >= N. Triggers commitment / consistency bias.
behavioral v0.9.0
Playground
Examples
3-step flow
1. Pick a plan
2. Enter email
3. Payment
<bias-commitment step="2" total="3" show-progress><div data-step="1" style="padding:8px 12px;background:var(--cg-color-surface-container-background);border-radius:8px;">1. Pick a plan</div><div data-step="2" style="padding:8px 12px;background:var(--cg-color-surface-container-background);border-radius:8px;">2. Enter email</div><div data-step="3" style="padding:8px 12px;background:var(--cg-color-surface-container-background);border-radius:8px;">3. Payment</div></bias-commitment>Import
import { BiasCommitment } from '@cognivo/components/bias';// Or tree-shake: import '@cognivo/components/bias-commitment';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
step | number | 1 | Current 1-indexed step |
total | number | 1 | Total steps |
show-progress | boolean | false | Render progress indicator |
Events
| Event | Detail | Description |
|---|---|---|
bias-commitment-advance | {from, to, total} | Fired by advance() method |