checklist

import { checklist } from '@markless/ui';

export default function Condimentsfunction Condiments(): Element() @{@{ · Component bodyOpens the body of a component, where ordinary statements and the markup they produce sit together.
	<checklist.root(alias) function root({ value, values, disabled, onChange, children, ...rest }: checklist.ChecklistRootProps): Element values(property) values?: readonly string[] | undefinedEvery value the list offers. Select-all compares the ticked set against this.={['lettuce', 'tomato']}>
		<checklist.label(alias) function label({ children, ...rest }: checklist.ChecklistLabelProps): Element>Sandwich condiments</checklist.label(alias) function label({ children, ...rest }: checklist.ChecklistLabelProps): Element>
		<checklist.selectall(alias) function selectall({ children, ...rest }: checklist.ChecklistSelectAllProps): Element>
			<checklist.selectallindicator(alias) function selectallindicator({ children, ...rest }: checklist.ChecklistSelectAllIndicatorProps): Element>Checked</checklist.selectallindicator(alias) function selectallindicator({ children, ...rest }: checklist.ChecklistSelectAllIndicatorProps): Element>
		</checklist.selectall(alias) function selectall({ children, ...rest }: checklist.ChecklistSelectAllProps): Element>
		<checklist.item(alias) function item({ value, disabled, name, children, ...rest }: checklist.ChecklistItemProps): Element value(property) value: stringThis item's name in the group's ticked set, and what a form submits for it.="lettuce">
			<checklist.itemtrigger(alias) function itemtrigger({ children, ...rest }: checklist.ChecklistItemTriggerProps): Element>
				<checklist.itemindicator(alias) function itemindicator({ children, ...rest }: checklist.ChecklistItemIndicatorProps): Element>Checked</checklist.itemindicator(alias) function itemindicator({ children, ...rest }: checklist.ChecklistItemIndicatorProps): Element>
			</checklist.itemtrigger(alias) function itemtrigger({ children, ...rest }: checklist.ChecklistItemTriggerProps): Element>
			<checklist.itemlabel(alias) function itemlabel({ children, ...rest }: checklist.ChecklistItemLabelProps): Element>Lettuce</checklist.itemlabel(alias) function itemlabel({ children, ...rest }: checklist.ChecklistItemLabelProps): Element>
		</checklist.item(alias) function item({ value, disabled, name, children, ...rest }: checklist.ChecklistItemProps): Element>
		<checklist.item(alias) function item({ value, disabled, name, children, ...rest }: checklist.ChecklistItemProps): Element value(property) value: stringThis item's name in the group's ticked set, and what a form submits for it.="tomato">
			<checklist.itemtrigger(alias) function itemtrigger({ children, ...rest }: checklist.ChecklistItemTriggerProps): Element>
				<checklist.itemindicator(alias) function itemindicator({ children, ...rest }: checklist.ChecklistItemIndicatorProps): Element>Checked</checklist.itemindicator(alias) function itemindicator({ children, ...rest }: checklist.ChecklistItemIndicatorProps): Element>
			</checklist.itemtrigger(alias) function itemtrigger({ children, ...rest }: checklist.ChecklistItemTriggerProps): Element>
			<checklist.itemlabel(alias) function itemlabel({ children, ...rest }: checklist.ChecklistItemLabelProps): Element>Tomato</checklist.itemlabel(alias) function itemlabel({ children, ...rest }: checklist.ChecklistItemLabelProps): Element>
		</checklist.item(alias) function item({ value, disabled, name, children, ...rest }: checklist.ChecklistItemProps): Element>
	</checklist.root(alias) function root({ value, values, disabled, onChange, children, ...rest }: checklist.ChecklistRootProps): Element>
}

The select-all is never told what it is. It works its own value out by comparing the ticked set against values, which is why it goes mixed on its own when some but not all of the items are on. The group and the select-all's own checkbox are one element: checklist.root is a role="group" and a checkbox root at the same time.

Anatomy

• checklist.root — the group, and the select-all's own checkbox.
• checklist.label — names the group by naming the select-all.
• checklist.selectall and checklist.selectallindicator — the tick-everything control.
• checklist.item — one row, named by its required value.
• checklist.itemtrigger, checklist.itemindicator, checklist.itemlabel, checklist.itemdescription — that row's parts.
• checklist.error — mounting it marks the enclosing checkbox invalid.
• checklist.field — the hidden native input for one row.

Every row is a checkbox, so the family writes ui-checked, ui-mixed and ui-disabled.

Props on checklist.root

Prop	Type	What it does
value	string[]	The values that are ticked. Omit it and nothing is.
values	string[]	Every value the list offers. Select-all compares the ticked set against this.
disabled	boolean	Nobody can change any item, and the select-all is locked too.
onChange	(value) => void	Called with the whole new ticked set whenever an item or the select-all changes.

Everything a <div> accepts reaches the element too. checklist.item takes its own value, disabled and name.