Checkbox
since v0.4.0Checkbox — controlled via checked+onCheckedChange or uncontrolled via defaultChecked.
indeterminate renders the mixed-state indicator.
Forwards ref to the root <label>.
Install
Add the package and import the component.
pnpm add @hey-mike/tungstenpnpm add @hey-mike/tungstenimport { Checkbox } from '@hey-mike/tungsten';import { Checkbox } from '@hey-mike/tungsten';Preview
Same fixtures used by the visual-regression suite.
Usage
apps/docs/app/snapshots/checkbox/page.tsx
import { Checkbox } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';
export default function CheckboxSnapshot() {
return (
<VariantGrid
title="Checkbox"
variants={[
{ label: 'unchecked', node: <Checkbox /> },
{ label: 'checked', node: <Checkbox defaultChecked /> },
{ label: 'disabled', node: <Checkbox disabled /> },
{ label: 'disabled checked', node: <Checkbox defaultChecked disabled /> },
]}
/>
);
}
import { Checkbox } from '@hey-mike/tungsten';
import { VariantGrid } from '../_components/VariantGrid';
export default function CheckboxSnapshot() {
return (
<VariantGrid
title="Checkbox"
variants={[
{ label: 'unchecked', node: <Checkbox /> },
{ label: 'checked', node: <Checkbox defaultChecked /> },
{ label: 'disabled', node: <Checkbox disabled /> },
{ label: 'disabled checked', node: <Checkbox defaultChecked disabled /> },
]}
/>
);
}
Props
Surface specific to <Checkbox />.
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | — | — |
| defaultChecked | boolean | false | — |
| onCheckedChange | ((checked: boolean) => void) | — | — |
| disabled | boolean | false | — |
| indeterminate | boolean | false | — |
| label | string | — | — |
| name | string | — | Forwarded to the native input so the box participates in form submission. |
| value | string | — | Submitted value when checked (native default is "on"). |