useCheckboxInputState

About

useCheckboxInputState manages one boolean checkbox value. It exposes direct controls and a memoized prop object for a controlled <input type="checkbox">.

Example

import { useCheckboxInputState } from "rooks";

export default function NewsletterChoice() {
  const newsletter = useCheckboxInputState(false);

  return (
    <div>
      <label>
        <input type="checkbox" {...newsletter.inputProps} />
        Receive the newsletter
      </label>
      <button type="button" onClick={newsletter.toggle}>
        Toggle
      </button>
      <p>{newsletter.checked ? "Subscribed" : "Not subscribed"}</p>
    </div>
  );
}

Parameters

• initialValue: required boolean used for the initial checked state.

Return value

The hook returns:

• checked: boolean
• toggle(): void
• setChecked(checked: boolean): void
• inputProps: { checked: boolean; onChange(event): void }

These private result shapes are shown inline and are not importable package types.

Behavior and lifecycle

The input change handler copies event.target.checked. toggle uses a functional state update, while setChecked assigns an explicit boolean. Both functions are stable. inputProps keeps the same object identity until checked changes. Later changes to initialValue do not reset state.

Compatibility and accessibility

The hook is browser-independent and safe during server rendering. It does not provide a label, name, disabled state, required state, or validation message. Keep the native checkbox associated with visible label text.

Related

• useInput manages a controlled text input.
• useFormState coordinates named fields and submission.