Checkbox & Radio

A checkbox with a quick pop-in checkmark and a radio group with an animated selection ring, both with matching haptics.

ReanimatedHapticsNativeWindSource

Prerequisites

Both controls are plain Reanimated and haptics, no icon set beyond the checkmark already bundled with the library's icons component.


npx expo install react-native-reanimated expo-haptics react-native-css

Install


npx @rslab/cli add checkbox

Usage

import { Checkbox } from '@/components/ui/Checkbox';

const [agreed, setAgreed] = useState(false);

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

import { RadioGroup } from '@/components/ui/Radio';

const [plan, setPlan] = useState('solo');

<RadioGroup
  value={plan}

  onChange={setPlan}

  options={[
    { label: 'Solo', value: 'solo' },

    { label: 'Team', value: 'team' },
  ]}
/>;

Props

Checkbox

PropTypeDefault

checked

boolean

-

onChange

(checked: boolean) => void

-

label?

string

-

Optional label rendered next to the box.

disabled?

boolean

false

Fades the row and blocks toggling.

haptic?

boolean

true

Light haptic tick on toggle. Set false to mute it.

className?

string

-

Extend or override the outer row.

RadioGroup

PropTypeDefault

value

T

-

onChange

(value: T) => void

-

options

{ label: string; value: T }[]

-

Generic over the value’s string literal type, so unions narrow correctly.

disabled?

boolean

false

Fades the group and blocks selection.

haptic?

boolean

true

Selection tick on picking a new option.

className?

string

-

Extend or override the outer wrapper.

How it works

Both crossfade rather than spring. The checkbox's border and background color interpolate on select, and the checkmark pops in with a quick ease-out timing, no spring, a checkbox gets toggled often enough that overshoot stops feeling charming fast. The radio group's ring border crossfades the same way, with the dot scaling in on the same timing.
A firmer press than a button gets. Because a checkbox target is small, press-in scales the whole box down to 0.92 instead of the button's 0.96, so the tap reads as more deliberate.
Haptics are chosen to match the interaction, not just copy-pasted. Checkbox fires impactAsync(Light), the same "press" feel as a button. RadioGroup fires selectionAsync() instead, the same "detent" feel iOS uses when you pick one of several options. Selecting an already-selected radio option is a no-op, so you never get a double haptic.
Generic over the value type. Both options (radio) and the underlying value are typed generically, so a string literal union for value narrows correctly at the call site.

Tuning

the 0.92 press-in scale on Checkbox, how firm the tap feels
the shared 140ms timing driving both the checkmark and the radio dot, keep it quick, this is a repeated interaction, not a one-off reveal
RadioItem's vertical padding: spacing between options in the group

See exactly how this works with an RSLAB subscription.

Get Pro

Checkbox & Radio

On this page