Checkbox

A Checkbox component allows users to select or deselect options. Built on top of heroui-native Checkbox with isSelected/onSelectedChange API.

Demo

React Native components render to native views, so this is the component running in the example app, in the theme you are reading in.

9:41
Checkbox running in the Nayan UI example app

Usage

Source
Checkbox.tsx
import { View } from 'react-native';
import { useState } from 'react';
import { NCheck, NText } from '@nayan-ui/native';


export default function CheckScreen() {
  const [a, setA] = useState(false);
  const [b, setB] = useState(true);


  return (
    <View className="p-4 gap-4">
      <NText className="text-lg font-bold">Basic</NText>
      <NCheck label="Accept terms and conditions" isSelected={a} onSelectedChange={setA} />
      <NText>Checked: {a ? 'Yes' : 'No'}</NText>


      <NText className="text-lg font-bold">Pre-checked</NText>
      <NCheck label="Receive newsletters" isSelected={b} onSelectedChange={setB} />


      <NText className="text-lg font-bold">Disabled</NText>
      <NCheck label="Disabled unchecked" isSelected={false} isDisabled onSelectedChange={() => {}} />
      <NCheck label="Disabled checked" isSelected isDisabled onSelectedChange={() => {}} />
    </View>
  );
}

Attributes

6 props
NameTypeDefaultDetails
labelstringRequiredLabel text for the checkbox.
isSelectedbooleanfalseWhether the checkbox is selected.
isDisabledbooleanfalseWhether the checkbox is disabled.
onSelectedChange(selected: boolean) => voidOptionalCallback when checkbox state changes.
containerClassNamestring' 'You can customise container by passing tailwind classes.
labelClassNamestring' 'You can customise label by passing tailwind classes.

Tags

Other components solving nearby problems.