Checkbox

A state atom whose appearance (checked, unchecked) is a pure function of the state prop. Pass a state directly or drive it from the Remotion timeline via useCurrentState. The component reads no frame — only the state value you give it.

Installation

$ pnpm dlx shadcn@latest add @remocn/checkbox

States

CheckboxState is:

type CheckboxState =
  | "unchecked"  // empty box, border = theme.border, no checkmark
  | "checked"    // box fills with primary, border = primary, checkmark draws on

checked fills the box background with primary, sets the border to primary, and draws the checkmark with opacity, scale, and stroke animations. unchecked renders an empty box with the theme border color.

Snap usage

Pass state directly — the component snaps instantly to that visual. Useful for static previews or when you drive state from your own logic:

import { Checkbox } from "@/components/remocn/checkbox";

export const Scene = () => <Checkbox state="checked" />;

To drive state from the timeline, use useCurrentState:

import { useCurrentState } from "@/lib/remocn-ui";
import { Checkbox } from "@/components/remocn/checkbox";

export const Scene = () => {
  const state = useCurrentState(
    [
      { at: 18, state: "checked" },
      { at: 78, state: "unchecked" },
    ],
    "unchecked",
  );

  return <Checkbox label="Accept terms" state={state} />;
};

Each at is a Sequence-local authored frame. State persists between steps: checked at frame 18 keeps the box checked until unchecked fires at frame 78. See Concepts for the full useCurrentState API.

Smooth transitions

State changes via state snap with no cross-fade. For animated transitions, use useCheckboxTransition from the copied use-checkbox-transition.ts file. It reads the frame, interpolates between state presets, and returns a resolved CheckboxStyle — pass it to the style prop:

import { Checkbox } from "@/components/remocn/checkbox";
import { useCheckboxTransition } from "@/components/remocn/use-checkbox-transition";

export const Scene = () => {
  const style = useCheckboxTransition([
    { at: 18, state: "checked", duration: 14 },
    { at: 78, state: "unchecked", duration: 12 },
  ]);
  return <Checkbox label="Accept terms" style={style} />;
};

The duration field on each step overrides the file's DEFAULT_DURATION for that specific transition. To globally tune timing and easing, edit use-checkbox-transition.ts directly in your project — that file is yours (shadcn "own your code" philosophy).

style takes precedence over state when both are provided.

Props