import Checkbox from '@cronocode/react-box/components/checkbox';<Checkbox label="Accept the terms" name="terms" defaultChecked />label renders the text inside a <label> that wraps the input. The association is implicit, so there is no htmlFor/id pair to generate or keep in sync, and the whole row is a click target — which is what a checkbox row is expected to be. A checkbox with no label is the most common accessibility failure there is, so this is not left to the consumer.<label> with labelProps; every other Box prop still styles the box itself. Leave label out and nothing wraps the input at all — the markup is exactly what it was before.<Checkbox label="Accept the terms" name="terms" labelProps={{ gap: 3, fontSize: 14 }} /><Checkbox label="Select all rows" name="rows" indeterminate />indeterminate is a DOM property, not an attribute — set it and the browser draws the dash, but the accessibility tree still says checked or not checked. The component adds aria-checked="mixed" alongside it, which is what a screen reader reads out. A parent checkbox over a partly-selected list is the case this exists for.indeterminate is a pseudo-class style prop as well as a state, so the tuple form carries both: indeterminate={[mixed, { opacity: 0.6 }]} is the state first and what :indeterminate should look like second.<Checkbox label="Accept the terms" disabled defaultChecked /><Checkbox clean defaultChecked />Switch is the same input underneath with role="switch" and a track-and-thumb style — see its page.