TkxCheckbox

import { TkxCheckbox } from 'tekivex-ui';

Basic

Basic — controlled

I agree to the terms

const [checked, setChecked] = useState(true);
<TkxCheckbox checked={checked} onChange={setChecked} label="I agree to the terms" />

States

<TkxCheckbox checked={true} onChange={...} label="Checked" />
<TkxCheckbox checked={false} onChange={...} label="Unchecked" />
<TkxCheckbox isIndeterminate label="Indeterminate" />
<TkxCheckbox checked={true} disabled label="Disabled (checked)" />

Color schemes

primary

success

warning

danger

With error message

I accept the privacy policyYou must accept to continue

Props

Prop	Type	Required	Description
`label`	`ReactNode`
`hint`	`string`
`isInvalid`	`boolean`
`errorMessage`	`string`
`isIndeterminate`	`boolean`
`size`	`CheckboxSize`
`colorScheme`	`'primary' \| 'success' \| 'danger' \| 'warning'`

Accessibility

Keyboard navigation supported on all interactive elements
:focus-visible outline at 2px (theme-token primary)
ARIA roles and properties applied per WAI-ARIA 1.2
Respects prefers-reduced-motion
Minimum 44×44 touch target where applicable

Source

The implementation lives at src/components/TkxCheckbox.tsx.

For a full interactive sandbox where you can change every prop and watch the rendered checkbox update in real time, open the playground.