Checkbox

The Checkbox component renders a Windows 98 styled checkbox with a label.

Props

Prop	Type	Default	Description
`checked`	`boolean`	-	Controlled checked state.
`defaultChecked`	`boolean`	`false`	Initial checked state for uncontrolled usage.
`disabled`	`boolean`	`false`	Disables the checkbox.
`onCheckedChange`	`(checked: boolean) => void`	-	Checked-state change callback for controlled usage.
`children`	`ReactNode`	-	Label content.
`className`	`string`	-	Adds custom classes to the input.

Migration

Use onCheckedChange={setChecked} instead of reading event.target.checked from a native onChange handler.

Examples

Basic states

Enable notificationsRemember meUnavailable optionDisabled checked

import { Checkbox } from '@murasaki/react98'
 
export function CheckboxBasicDemo(): React.ReactElement {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <Checkbox>Enable notifications</Checkbox>
      <Checkbox defaultChecked>Remember me</Checkbox>
      <Checkbox disabled>Unavailable option</Checkbox>
      <Checkbox disabled defaultChecked>Disabled checked</Checkbox>
    </div>
  )
}

Controlled

Unchecked

import { Checkbox } from '@murasaki/react98'
import { useState } from 'react'
 
export function CheckboxControlledDemo(): React.ReactElement {
  const [checked, setChecked] = useState(false)
 
  return (
    <Checkbox checked={checked} onCheckedChange={setChecked}>
      {checked ? 'Checked' : 'Unchecked'}
    </Checkbox>
  )
}

ARIA

Checkbox uses a native input type="checkbox" and an associated label, so checked and disabled states are communicated through native form semantics.

Keyboard

Key	Behavior
`Space`	Toggles the checkbox.

SSR

Checkbox is a client component through the package root. Server markup stays stable when checked or defaultChecked values are stable between server and client.