v0.1.0

<PxCheckbox />ReactFormsForm controlFree

Checkbox

Form checkbox that fills from the centre and draws its check, with a mixed state for parent and child selections.

View as Markdown

<PxCheckbox />· loading

Playground

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

Loading <PxCheckbox />

Props

childrenlive

defaultCheckedremounts

disabledlive

React

<PxCheckbox>Email</PxCheckbox>

Installation

pnpm dlx shadcn@latest add @lumesec/px-checkbox

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/px-checkbox.json

Usage

px-checkbox-example.tsx

import { PxCheckbox } from "@/components/lumesec/px-checkbox";

export function Example() {
  return (
    <PxCheckbox name="notify" value="email" defaultChecked>
      Email
    </PxCheckbox>
  );
}

Behaviour

Fills from the centre and draws its check, and supports the mixed state. This demo wires an “All channels” parent to three children.

API reference

Props

Also accepts every prop of <span> (React.ComponentProps<"span">), spread onto the root element.

checkedTypePxCheckedState

Controlled state: true, false or "indeterminate" (drawn as a dash). Use with onCheckedChange.

defaultCheckedTypePxCheckedStateDefaultfalse

Initial state when uncontrolled. A form reset restores it.

childrenTypeReact.ReactNode

Label, next to the box.

valueTypestringDefault"on"

Value submitted with the form when checked.

nameTypestring

Form field name. Nothing is submitted while unchecked.

disabledTypebooleanDefaultfalse

Dims the checkbox, ignores click and Space and removes it from the tab order.

onCheckedChangeType(checked: PxCheckedState) => void

Called when the user toggles the checkbox. Toggling the mixed state checks it.

Ref

ref points at the root HTMLSpanElement.

Keyboard

Keys	Action
Space	Toggle.

Accessibility

The root is a role="checkbox" element with tabindex="0" (-1 while disabled), aria-checked set to true, false or mixed, and aria-disabled.
Its accessible name comes from the children.
Enter does not toggle; Space and click do.
The box is drawn on an aria-hidden canvas.
With name, a hidden input submits value while checked, and nothing while unchecked or mixed. There is no validation. Form reset restores defaultChecked and calls onCheckedChange when that changes the state.
Reduced motion: the fill and check appear at once and the box does not pop.

Theming

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --foreground, --card and --lumesec.

Notes

Parent and child behaviour, such as an "All" box driving its children, is not built in: derive the parent's checked (true, false or "indeterminate") from the children and set the children in its onCheckedChange.
The root carries data-state set to checked, unchecked or indeterminate.

<px-input>

Text fieldpx-input

<px-password>

Passwordpx-password

<px-otp>

One-time codepx-otp

<px-search>

Search with resultspx-search

Was this page helpful?

Related