BearStudio · heloise-gllm · Oct 9, 2025
diff --git a/apps/docs/pages/docs/Components/Inputs/checkbox.en-US.mdx b/apps/docs/pages/docs/Components/Inputs/checkbox.en-US.mdx
@@ -12,7 +12,7 @@ Component to render a checkbox input.
 ## Import
 
 ```js
-import { Checkbox, CheckboxGroup } from 'react-native-ficus-ui';
+import { Checkbox, CheckboxGroup, Button } from 'react-native-ficus-ui';
 ```
 
 ## Usage
@@ -67,16 +67,17 @@ import { Checkbox, CheckboxGroup } from 'react-native-ficus-ui';
   <HStack spacing="sm">
     {["Option 1", "Option 2", "Option 3"].map((item) => (
       <Checkbox value={item}>
-        {({ isChecked }) => (
-          <Box
+        {({ isChecked, onToggle }) => (
+          <Button
             bg={isChecked ? "blue.600" : "blue.100"}
             px="xl"
             py="md"
             mr="md"
             borderRadius="full"
+            onPress={onToggle}
           >
             <Text color={isChecked ? "white" : "gray.800"}>{item}</Text>
-          </Box>
+          </Button>
         )}
 
       </Checkbox>
@@ -126,6 +127,12 @@ Extends every `TouchableOpacity` props.
   prop={{ type: "(value: string | number) => void", required: false }}
 />
 
+### `onToggle`
+<PropsTable
+  description="Function that applies the toggle logic for when an item is checked."
+  prop={{ type: "(event : GestureEvent) => void", required: false }}
+/>
+
 ### `icon`
 <PropsTable
   description="Custom icon component to replace default checkbox icon."

diff --git a/apps/docs/pages/docs/Components/Inputs/radio.en-US.mdx b/apps/docs/pages/docs/Components/Inputs/radio.en-US.mdx
@@ -12,7 +12,7 @@ Component to render a radio input.
 ## Import
 
 ```js
-import { Radio, RadioGroup } from 'react-native-ficus-ui';
+import { Radio, RadioGroup, Button } from 'react-native-ficus-ui';
 ```
 
 ## Usage
@@ -88,17 +88,16 @@ import { Radio, RadioGroup } from 'react-native-ficus-ui';
   <HStack spacing="md">
     {["Option 1", "Option 2", "Option 3"].map((item) => (
         <Radio value={item}>
-          {({ isChecked }) => (
-            <Badge
-              variant={isChecked ? "solid" : "subtle"}
+          {({ isChecked, onToggle }) => (
+            <Button
+              bg={isChecked ? "pink.500" : "pink.200"}
               colorScheme="pink"
               fontSize="xl"
-              px="lg"
-              py="lg"
               borderRadius="full"
+              onPress={onToggle}
             >
               {item}
-            </Badge>
+            </Button>
           )}
         </Radio>
     ))}
@@ -129,6 +128,12 @@ Extends every `TouchableOpacity` props.
   prop={{ type: "boolean", required: false }}
 />
 
+### `onToggle`
+<PropsTable
+  description="Function that applies the toggle logic for when an item is checked."
+  prop={{ type: "(event : GestureEvent) => void", required: false }}
+/>
+
 ### `isDisabled`
 <PropsTable
   description="Boolean to indicate if radio is disabled."

diff --git a/apps/examples/app/components/Checkbox.tsx b/apps/examples/app/components/Checkbox.tsx
@@ -1,21 +1,41 @@
-import { SafeAreaView } from "react-native";
-import { Box, Checkbox, CheckboxGroup, HStack, Icon, SafeAreaBox, Text, useColorModeValue, VStack } from  "react-native-ficus-ui";
-import ExampleSection from "@/src/ExampleSection";
+import { SafeAreaView } from 'react-native';
+import {
+  Box,
+  Button,
+  Checkbox,
+  CheckboxGroup,
+  HStack,
+  Icon,
+  SafeAreaBox,
+  Text,
+  VStack,
+  useColorModeValue,
+} from 'react-native-ficus-ui';
+
+import ExampleSection from '@/src/ExampleSection';
 
 const CheckboxComponent = () => {
   return (
-    <SafeAreaBox flex={1} bg={useColorModeValue("gray.100", "gray.800")}>
+    <SafeAreaBox flex={1} bg={useColorModeValue('gray.100', 'gray.800')}>
       <Text mx="xl" fontSize="4xl">
         Checkbox component
       </Text>
       <ExampleSection name="Simple checkbox">
         <VStack spacing="md">
           <Checkbox>Option 1</Checkbox>
-          <Checkbox colorScheme="red" defaultChecked>Option 1</Checkbox>
+          <Checkbox colorScheme="red" defaultChecked>
+            Option 1
+          </Checkbox>
         </VStack>
       </ExampleSection>
       <ExampleSection name="Custom icon">
-        <Checkbox colorScheme="purple" defaultChecked icon={<Icon name="flash-outline" />}>Option 1</Checkbox>
+        <Checkbox
+          colorScheme="purple"
+          defaultChecked
+          icon={<Icon name="flash-outline" />}
+        >
+          Option 1
+        </Checkbox>
       </ExampleSection>
       <ExampleSection name="Sizes">
         <VStack spacing="md">
@@ -27,9 +47,7 @@ const CheckboxComponent = () => {
       </ExampleSection>
       <ExampleSection name="Checkbox disabled">
         <HStack spacing="md">
-          <Checkbox isDisabled>
-            Option 1
-          </Checkbox>
+          <Checkbox isDisabled>Option 1</Checkbox>
           <Checkbox isDisabled defaultChecked>
             Option 1
           </Checkbox>
@@ -48,20 +66,41 @@ const CheckboxComponent = () => {
       <ExampleSection name="Custom render">
         <CheckboxGroup flexDirection="row">
           <HStack spacing="sm">
-            {["Option 1", "Option 2", "Option 3"].map((item) => (
+            {['Option 1', 'Option 2', 'Option 3'].map((item) => (
               <Checkbox value={item} key={`checkbox-option-${item}`}>
                 {({ isChecked }) => (
                   <Box
-                    bg={isChecked ? "blue.600" : "blue.100"}
+                    bg={isChecked ? 'blue.600' : 'blue.100'}
                     px="xl"
                     py="md"
                     mr="md"
                     borderRadius="full"
                   >
-                    <Text color={isChecked ? "white" : "gray.800"}>{item}</Text>
+                    <Text color={isChecked ? 'white' : 'gray.800'}>{item}</Text>
                   </Box>
                 )}
-
+              </Checkbox>
+            ))}
+          </HStack>
+        </CheckboxGroup>
+      </ExampleSection>
+      <ExampleSection name="Custom render with Button">
+        <CheckboxGroup flexDirection="row">
+          <HStack spacing="sm">
+            {['Option 1', 'Option 2', 'Option 3'].map((item) => (
+              <Checkbox value={item} key={`checkbox-option-${item}`}>
+                {({ isChecked, onToggle }) => (
+                  <Button
+                    bg={isChecked ? 'blue.600' : 'blue.100'}
+                    px="xl"
+                    py="md"
+                    mr="md"
+                    borderRadius="full"
+                    onPress={onToggle}
+                  >
+                    <Text color={isChecked ? 'white' : 'gray.800'}>{item}</Text>
+                  </Button>
+                )}
               </Checkbox>
             ))}
           </HStack>

diff --git a/apps/examples/app/components/Radio.tsx b/apps/examples/app/components/Radio.tsx
@@ -1,9 +1,21 @@
-import { Badge, Box, HStack, VStack, Radio, RadioGroup, Text, SafeAreaBox, useColorModeValue } from "react-native-ficus-ui";
-import ExampleSection from "@/src/ExampleSection";
+import {
+  Badge,
+  Box,
+  Button,
+  HStack,
+  Radio,
+  RadioGroup,
+  SafeAreaBox,
+  Text,
+  VStack,
+  useColorModeValue,
+} from 'react-native-ficus-ui';
+
+import ExampleSection from '@/src/ExampleSection';
 
 const RadioComponent = () => {
   return (
-    <SafeAreaBox flex={1} bg={useColorModeValue("gray.100", "gray.800")}>
+    <SafeAreaBox flex={1} bg={useColorModeValue('gray.100', 'gray.800')}>
       <Text mx="xl" fontSize="4xl">
         Radio component
       </Text>
@@ -19,24 +31,16 @@ const RadioComponent = () => {
           <Radio value={4} isDisabled>
             Label
           </Radio>
-          <Radio value={5}>
-            Label
-          </Radio>
+          <Radio value={5}>Label</Radio>
         </Box>
       </ExampleSection>
 
       <ExampleSection name="Simple radio group">
         <RadioGroup colorScheme="red">
           <VStack spacing="sm">
-            <Radio value={1}>
-              Option 1
-            </Radio>
-            <Radio value={2}>
-              Option 2
-            </Radio>
-            <Radio value={3}>
-              Option 3
-            </Radio>
+            <Radio value={1}>Option 1</Radio>
+            <Radio value={2}>Option 2</Radio>
+            <Radio value={3}>Option 3</Radio>
           </VStack>
         </RadioGroup>
       </ExampleSection>
@@ -63,21 +67,41 @@ const RadioComponent = () => {
       <ExampleSection name="Custom radio">
         <RadioGroup colorScheme="red">
           <HStack spacing="md">
-            {["Option 1", "Option 2", "Option 3"].map((item) => (
-                <Radio value={item} key={`radio-option-${item}`}>
-                  {({ isChecked }) => (
-                    <Badge
-                      variant={isChecked ? "solid" : "subtle"}
-                      colorScheme="pink"
-                      fontSize="xl"
-                      px="lg"
-                      py="lg"
-                      borderRadius="full"
-                    >
-                      {item}
-                    </Badge>
-                  )}
-                </Radio>
+            {['Option 1', 'Option 2', 'Option 3'].map((item) => (
+              <Radio value={item} key={`radio-option-${item}`}>
+                {({ isChecked }) => (
+                  <Badge
+                    variant={isChecked ? 'solid' : 'subtle'}
+                    colorScheme="pink"
+                    fontSize="xl"
+                    px="lg"
+                    py="lg"
+                    borderRadius="full"
+                  >
+                    {item}
+                  </Badge>
+                )}
+              </Radio>
+            ))}
+          </HStack>
+        </RadioGroup>
+      </ExampleSection>
+      <ExampleSection name="Custom radio with button">
+        <RadioGroup colorScheme="red">
+          <HStack spacing="md">
+            {['Option 1', 'Option 2', 'Option 3'].map((item) => (
+              <Radio value={item} key={`radio-option-${item}`}>
+                {({ isChecked, onToggle }) => (
+                  <Button
+                    bg={isChecked ? 'pink.500' : 'pink.200'}
+                    fontSize="xl"
+                    borderRadius="full"
+                    onPress={onToggle}
+                  >
+                    {item}
+                  </Button>
+                )}
+              </Radio>
             ))}
           </HStack>
         </RadioGroup>

diff --git a/packages/react-native-ficus-ui/src/components/checkbox/checkbox.types.ts b/packages/react-native-ficus-ui/src/components/checkbox/checkbox.types.ts
@@ -1,3 +1,5 @@
+import { GestureResponderEvent } from 'react-native';
+
 export interface CheckboxGroupStates {
   isDisabled?: boolean;
 }
@@ -12,6 +14,7 @@ export interface CheckboxGroupOptions extends CheckboxGroupStates {
 
 export interface CheckboxStates extends CheckboxGroupStates {
   isChecked?: boolean;
+  onToggle?: (event: GestureResponderEvent) => void;
 }
 
 export interface CheckboxOptions extends CheckboxStates {

diff --git a/packages/react-native-ficus-ui/src/components/checkbox/index.tsx b/packages/react-native-ficus-ui/src/components/checkbox/index.tsx
@@ -88,6 +88,7 @@ export const Checkbox = forwardRef<CheckboxProps, 'TouchableOpacity'>(
         return children({
           isDisabled: isDisabled ?? false,
           isChecked: checked,
+          onToggle: handleOnPress,
         });
       }
 

diff --git a/packages/react-native-ficus-ui/src/components/radio/index.tsx b/packages/react-native-ficus-ui/src/components/radio/index.tsx
@@ -73,6 +73,7 @@ export const Radio = forwardRef<RadioProps, 'TouchableOpacity'>(
         return children({
           isDisabled: isDisabled ?? false,
           isChecked: checked,
+          onToggle: handleOnPress,
         });
       }
 

diff --git a/packages/react-native-ficus-ui/src/components/radio/radio.types.ts b/packages/react-native-ficus-ui/src/components/radio/radio.types.ts
@@ -1,3 +1,5 @@
+import { GestureResponderEvent } from 'react-native';
+
 export interface RadioGroupStates {
   isDisabled?: boolean;
 }
@@ -12,6 +14,7 @@ export interface RadioGroupOptions extends RadioGroupStates {
 
 export interface RadioStates extends RadioGroupStates {
   isChecked?: boolean;
+  onToggle?: (event: GestureResponderEvent) => void;
 }
 export interface RadioOptions extends RadioStates {
   defaultChecked?: boolean;