Checkbox and radio

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/checkbox.json

Then run npx expo install --fix so react-native-reanimated, react-native-svg match your Expo SDK. Files land in components/goodui-native/checkbox.

Usage

import { useState } from "react";
import { Checkbox, RadioGroup } from "@/components/goodui-native/checkbox/checkbox";

export function Checkout() {
  const [speed, setSpeed] = useState<"standard" | "express">("standard");
  const [terms, setTerms] = useState(false);
  return (
    <>
      <RadioGroup
        accessibilityLabel="Delivery"
        value={speed}
        onValueChange={setSpeed}
        options={[
          { value: "standard", label: "Standard", description: "3 to 5 days, free" },
          { value: "express", label: "Express", description: "Tomorrow, $9.90" },
        ]}
      />
      <Checkbox label="I accept the terms of service" checked={terms} onCheckedChange={setTerms} />
    </>
  );
}

When to use

Examples

const all = picked.length === items.length;
<Checkbox
  label="Select all"
  checked={all ? true : picked.length ? "indeterminate" : false}
  onCheckedChange={(on) => setPicked(on ? items.map((i) => i.id) : [])}
/>

<CheckboxGroup
  position="trailing"
  value={channels}
  onValueChange={setChannels}
  options={[
    { value: "email", label: "Email" },
    { value: "sms", label: "Text message" },
    { value: "push", label: "Push" },
  ]}
/>

API reference

Motion and haptics

• •Check: the fill closes in from 40 % on the snappy spring, then the check stroke draws itself in 240 ms.
• •Checked to indeterminate (and back): one stroke retracts while the other draws.
• •Radio: the fill closes in and the center dot pops.
• •Press: the box scales to 0.88 from touch down; rows also fill with a muted background.
• •Reduced motion: no scaling; fill, stroke and dot appear with a short fade-speed timing.

• •Haptic: pop when a checkbox is checked, tick when it is unchecked or a radio is chosen (a radio that is already selected does nothing)

• •The stroke is drawn with an animated strokeDashoffset on the UI thread; a change is one React update.

Accessibility

• •Each item is a checkbox or radio (accessibilityRole) whose label is 'label, description'. Checkboxes report checked true, false or mixed; radios report checked and selected.
• •RadioGroup is a radiogroup labelled by accessibilityLabel.
• •Without a visible label pass accessibilityLabel; the bare control then gets hitSlop up to 44 pt. Labelled items are at least 44 pt tall.

Notes for AI

Related