Tick Box

A checkbox whose fill pops in on a spring and whose tick grows out of the box. It also has a "mixed" state for a select-all box over partly checked children. The whole row is the touch target, pressing the label toggles it, and the state is read out as checked, unchecked or mixed. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add tick-box

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/tick-box.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { useState } from "react";
import { TickBox } from "@/components/ui/tick-box";

export default function Example() {
  const [agreed, setAgreed] = useState(false);

  return <TickBox label="I agree to the terms" checked={agreed} onChange={setAgreed} />;
}

Props