Checkbox

States

Checked controls use OPERATOR's Check icon; mixed selections use Minus.

Sizes

Inside a Field

ACKNOWLEDGE

REQUIRED

An invalid checkbox, by a Field error or its own aria-invalid, draws its box in the error color, checked or not.

Required

A required checkbox, or one in a required Field, blocks a native form submission with the browser's own message until it is checked. Its server markup already carries the native required, so the check holds even before the page is interactive. Validate on the server too.

I HAVE READ THE PROCEDURE

Props

PROP	TYPE	DEFAULT	REQUIRED
`motion` Tactile pointer/touch feedback. None disables motion; keyboard and system reduced motion are always immediate.	`enum` auto \| none	`"auto"`	no
`checked` Pass boolean for binary state, or 'indeterminate' for tri-state.	`enum` true \| false \| indeterminate	—	no
`defaultChecked`	`enum` true \| false \| indeterminate	—	no
`onCheckedChange` (checked: boolean \| 'indeterminate') => void. Called when the operator checks or clears the box; the only way to observe a change.	`function`	—	no
`disabled`	`boolean`	`false`	no
`required`	`boolean`	`false`	no
`size`	`enum` sm \| md \| lg	`"md"`	no
`name`	`string`	—	no
`value`	`string`	—	no

Accessibility

checkbox role with tri-state aria-checked; Space toggles.
Each size reserves a 24px target.
Inherits id, aria-describedby, aria-invalid, and required from Field.
The box outline is the control outline (--oprt-border-control, 3:1 or more).
In forced-colors (high contrast) mode, keyboard focus draws a 2px outline in the system text color around the box, the checked and mixed marks stay visible, and a disabled box is drawn in the system's gray text color.

Manifest entry

<Field label="ACKNOWLEDGE" required>
  <Checkbox />
</Field>

View agent manifest

{
  "description": "Binary or tri-state checkbox. Shared OPERATOR Check icon when checked and Minus icon when indeterminate, inside an accent outline.",
  "props": {
    "motion": {
      "type": "enum",
      "values": [
        "auto",
        "none"
      ],
      "default": "auto",
      "description": "Tactile pointer/touch feedback. None disables motion; keyboard and system reduced motion are always immediate."
    },
    "checked": {
      "type": "enum",
      "values": [
        "true",
        "false",
        "indeterminate"
      ],
      "description": "Pass boolean for binary state, or 'indeterminate' for tri-state."
    },
    "defaultChecked": {
      "type": "enum",
      "values": [
        "true",
        "false",
        "indeterminate"
      ]
    },
    "onCheckedChange": {
      "type": "function",
      "description": "(checked: boolean | 'indeterminate') => void. Called when the operator checks or clears the box; the only way to observe a change."
    },
    "disabled": {
      "type": "boolean",
      "default": false
    },
    "required": {
      "type": "boolean",
      "default": false
    },
    "size": {
      "type": "enum",
      "values": [
        "sm",
        "md",
        "lg"
      ],
      "default": "md"
    },
    "name": {
      "type": "string"
    },
    "value": {
      "type": "string"
    }
  },
  "composable_with": [
    "Field"
  ],
  "never_inside": [
    "Button",
    "Badge"
  ],
  "example": "<Field label=\"ACKNOWLEDGE\" required>\n  <Checkbox />\n</Field>"
}

Motion

Check and indeterminate marks fade and scale within a fixed slot over 150ms. The checked state, callback, and form value update immediately.

Use motion="none" for frequently operated controls. The default motion="auto" respects system reduced motion, skips keyboard and assistive activation, and starts from the supplied resting state. See Motion for the interactive playground.