Skip to content
MIZU.

Checkbox

A generous check target with a secondary description and native form submission.

Live — this one is real

Usage

import { Checkbox } from "mizu-ui";

export function Example() {
  return (
    <Checkbox
      label="Include source maps"
      hint="Useful when debugging production."
      name="sourcemaps"
      defaultChecked
    />
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect forms/Fields.tsx

Source is included in the npm package under src/forms/Fields.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
labelReactNode—Clickable label.
hintstring—Linked secondary description.
...inputInputHTMLAttributes—Native checked, defaultChecked, events, name and ref.

Accessibility

The full label is clickable. Native checkbox handles Space, focus and checked state.

Motion

CSS transitions explain state changes. Reduced motion removes travel.

Works alongside

FormFieldTextFieldTextAreaSelectField