StatusCheckbox

Multi-state checkbox that snaps between first/last on click and cycles through all states with Ctrl/Cmd+click. Each state can use an Iconify icon and a CSS color.

import { StatusCheckbox } from 'phoundry-ui';

Default three states

Key: unchecked

Click to snap between unchecked and checked; Ctrl/Cmd+click cycles all states.

Show code

<StatusCheckbox bind:activeKey />

Custom workflow states

Key: todo

Show code

<StatusCheckbox bind:activeKey states={workflowStates} ariaLabelPrefix="Task" />

Props

Prop	Type	Default	Description
activeKey required	string	—	Current state key (bindable)
states	StatusCheckboxStateDef[]	—	Ordered states for cycle/snap; defaults to unchecked / indeterminate / checked
fallbackChar	string	—	Character shown when activeKey is not in states (gray box)
disabled	boolean	false	Prevents interaction
size	'sm' \| 'md'	'sm'	Indicator box (~14px sm / ~16px md display size)
ariaLabelPrefix	string	—	Prepended to state label for aria-label (e.g. "Task")
onchange	(key: string, event?: MouseEvent) => void	—	Called after cycle or snap with the new key
class	string	—	Additional CSS classes on the button
element	HTMLButtonElement	—	Bindable reference to the control button