diff --git a/apps/fluent-tester/src/TestComponents/CheckboxV1/BasicCheckboxTest.tsx b/apps/fluent-tester/src/TestComponents/CheckboxV1/BasicCheckboxTest.tsx
new file mode 100644
index 0000000000..c28fb558b4
--- /dev/null
+++ b/apps/fluent-tester/src/TestComponents/CheckboxV1/BasicCheckboxTest.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
+import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+
+function onChangeUncontrolled(_e: InteractionEvent, isChecked: boolean) {
+ console.log(isChecked);
+}
+
+export const BasicCheckbox: React.FunctionComponent = () => {
+ return (
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/apps/fluent-tester/src/TestComponents/CheckboxV1/CheckboxV1Test.tsx b/apps/fluent-tester/src/TestComponents/CheckboxV1/CheckboxV1Test.tsx
index 35597ce467..6214b8c692 100644
--- a/apps/fluent-tester/src/TestComponents/CheckboxV1/CheckboxV1Test.tsx
+++ b/apps/fluent-tester/src/TestComponents/CheckboxV1/CheckboxV1Test.tsx
@@ -1,181 +1,15 @@
import * as React from 'react';
-import { View, TextInput, Platform } from 'react-native';
-
-import { ButtonV1 as Button } from '@fluentui-react-native/button';
-import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
-import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
-import type { Theme } from '@fluentui-react-native/theme-types';
-import { useTheme } from '@fluentui-react-native/theme-types';
-import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { Platform } from 'react-native';
import { E2ECheckboxV1Test } from './E2ECheckboxV1Test';
import { CHECKBOXV1_TESTPAGE } from '../../../../E2E/src/CheckboxV1/consts';
-import { commonTestStyles as commonStyles, mobileStyles } from '../Common/styles';
import type { TestSection, PlatformStatus } from '../Test';
import { Test } from '../Test';
-
-function onChangeUncontrolled(_e: InteractionEvent, isChecked: boolean) {
- console.log(isChecked);
-}
-
-const BasicCheckbox: React.FunctionComponent = () => {
- return (
-
-
-
-
-
-
-
-
- );
-};
-
-const DesktopSpecificCheckbox: React.FunctionComponent = () => {
- return (
- <>
-
-
-
- >
- );
-};
-
-const SizeCheckbox: React.FunctionComponent = () => {
- return (
-
-
-
-
-
-
- );
-};
-
-const OtherCheckbox: React.FunctionComponent = () => {
- const [isChecked, setisChecked] = React.useState(false);
-
- const setCheckedTrue = React.useCallback(() => {
- setisChecked(true);
- }, []);
-
- const setCheckedFalse = React.useCallback(() => {
- setisChecked(false);
- }, []);
-
- const memoizedStyles = React.useMemo(() => (Platform.OS === 'android' ? { ...mobileStyles.containerSpacedEvenly, height: 150 } : {}), []);
-
- return (
-
-
-
-
-
- {Platform.OS !== 'android' && (
- <>
-
-
- >
- )}
-
- );
-};
-
-const CircleColorCheckbox = Checkbox.customize({
- checked: {
- checkboxBackgroundColor: 'green',
- checkboxBorderColor: 'green',
- checkmarkColor: 'white',
- },
-});
-
-const HoverCheckbox = Checkbox.customize({
- hovered: {
- checkmarkOpacity: 1,
- },
-});
-
-const BigLabelCheckbox = Checkbox.customize({
- label: {
- fontSize: 24,
- fontWeight: 'bold',
- },
-});
-
-const ComposedCheckbox = Checkbox.compose({
- slotProps: {
- label: { style: { color: 'hotpink' } },
- },
-});
-
-const getThemedStyles = themedStyleSheet((t: Theme) => {
- return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } };
-});
-
-const TokenCheckbox: React.FunctionComponent = () => {
- const [checkboxColor, setCheckboxColor] = React.useState('blue');
- const [checkmarkColor, setCheckmarkColor] = React.useState('white');
-
- const BlueCheckbox = Checkbox.customize({
- checked: {
- checkboxBackgroundColor: checkboxColor,
- checkboxBorderColor: checkboxColor,
- checkmarkColor: checkmarkColor,
- },
- });
-
- const theme = useTheme();
- const textBoxBorderStyle = getThemedStyles(theme);
-
- return (
-
- {Platform.OS !== 'android' && (
- <>
-
-
- >
- )}
-
-
-
-
-
- {
- setCheckboxColor(e.nativeEvent.text);
- }}
- />
-
- {
- setCheckmarkColor(e.nativeEvent.text);
- }}
- />
-
- );
-};
+import { BasicCheckbox } from './BasicCheckboxTest';
+import { DesktopSpecificCheckbox } from './DesktopSpecificCheckboxTest';
+import { OtherCheckbox } from './OtherCheckboxPropsTest';
+import { SizeCheckbox } from './SizeCheckboxTest';
+import { TokenCheckbox } from './TokenCheckboxTest';
const checkboxSections: TestSection[] = [
{
diff --git a/apps/fluent-tester/src/TestComponents/CheckboxV1/DesktopSpecificCheckboxTest.tsx b/apps/fluent-tester/src/TestComponents/CheckboxV1/DesktopSpecificCheckboxTest.tsx
new file mode 100644
index 0000000000..208ae7ac53
--- /dev/null
+++ b/apps/fluent-tester/src/TestComponents/CheckboxV1/DesktopSpecificCheckboxTest.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
+
+export const DesktopSpecificCheckbox: React.FunctionComponent = () => {
+ return (
+ <>
+
+
+
+ >
+ );
+};
diff --git a/apps/fluent-tester/src/TestComponents/CheckboxV1/OtherCheckboxPropsTest.tsx b/apps/fluent-tester/src/TestComponents/CheckboxV1/OtherCheckboxPropsTest.tsx
new file mode 100644
index 0000000000..b212b7b57d
--- /dev/null
+++ b/apps/fluent-tester/src/TestComponents/CheckboxV1/OtherCheckboxPropsTest.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Platform, View } from 'react-native';
+
+import { ButtonV1 as Button } from '@fluentui-react-native/button';
+import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
+
+import { mobileStyles } from '../Common/styles';
+
+export const OtherCheckbox: React.FunctionComponent = () => {
+ const [isChecked, setisChecked] = React.useState(false);
+
+ const setCheckedTrue = React.useCallback(() => {
+ setisChecked(true);
+ }, []);
+
+ const setCheckedFalse = React.useCallback(() => {
+ setisChecked(false);
+ }, []);
+
+ const memoizedStyles = React.useMemo(() => (Platform.OS === 'android' ? { ...mobileStyles.containerSpacedEvenly, height: 150 } : {}), []);
+
+ return (
+
+
+
+
+
+ {Platform.OS !== 'android' && (
+ <>
+
+
+ >
+ )}
+
+ );
+};
diff --git a/apps/fluent-tester/src/TestComponents/CheckboxV1/SizeCheckboxTest.tsx b/apps/fluent-tester/src/TestComponents/CheckboxV1/SizeCheckboxTest.tsx
new file mode 100644
index 0000000000..230bd1a471
--- /dev/null
+++ b/apps/fluent-tester/src/TestComponents/CheckboxV1/SizeCheckboxTest.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
+
+export const SizeCheckbox: React.FunctionComponent = () => {
+ return (
+ <>
+
+
+
+
+ >
+ );
+};
diff --git a/apps/fluent-tester/src/TestComponents/CheckboxV1/TokenCheckboxTest.tsx b/apps/fluent-tester/src/TestComponents/CheckboxV1/TokenCheckboxTest.tsx
new file mode 100644
index 0000000000..c27c3cadd7
--- /dev/null
+++ b/apps/fluent-tester/src/TestComponents/CheckboxV1/TokenCheckboxTest.tsx
@@ -0,0 +1,106 @@
+import React from 'react';
+import { View, TextInput, Platform } from 'react-native';
+
+import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
+import type { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+import type { Theme } from '@fluentui-react-native/theme-types';
+import { useTheme } from '@fluentui-react-native/theme-types';
+import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+
+import { commonTestStyles as commonStyles } from '../Common/styles';
+
+function onChangeUncontrolled(_e: InteractionEvent, isChecked: boolean) {
+ console.log(isChecked);
+}
+
+const CircleColorCheckbox = Checkbox.customize({
+ checked: {
+ checkboxBackgroundColor: 'green',
+ checkboxBorderColor: 'green',
+ checkmarkColor: 'white',
+ },
+});
+
+const HoverCheckbox = Checkbox.customize({
+ hovered: {
+ checkmarkOpacity: 1,
+ },
+});
+
+const BigLabelCheckbox = Checkbox.customize({
+ label: {
+ fontSize: 24,
+ fontWeight: 'bold',
+ },
+});
+
+const ComposedCheckbox = Checkbox.compose({
+ slotProps: {
+ label: { style: { color: 'hotpink' } },
+ },
+});
+
+const getThemedStyles = themedStyleSheet((t: Theme) => {
+ return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } };
+});
+
+export const TokenCheckbox: React.FunctionComponent = () => {
+ const [checkboxColor, setCheckboxColor] = React.useState('blue');
+ const [checkmarkColor, setCheckmarkColor] = React.useState('white');
+
+ const BlueCheckbox = Checkbox.customize({
+ checked: {
+ checkboxBackgroundColor: checkboxColor,
+ checkboxBorderColor: checkboxColor,
+ checkmarkColor: checkmarkColor,
+ },
+ });
+
+ const theme = useTheme();
+ const textBoxBorderStyle = getThemedStyles(theme);
+
+ return (
+
+ {Platform.OS !== 'android' && (
+ <>
+
+
+ >
+ )}
+
+
+
+
+
+ {
+ setCheckboxColor(e.nativeEvent.text);
+ }}
+ />
+
+ {
+ setCheckmarkColor(e.nativeEvent.text);
+ }}
+ />
+
+ );
+};
diff --git a/change/@fluentui-react-native-tester-bee09dc9-b280-4a47-98c5-6a1690461be4.json b/change/@fluentui-react-native-tester-bee09dc9-b280-4a47-98c5-6a1690461be4.json
new file mode 100644
index 0000000000..89e7a72070
--- /dev/null
+++ b/change/@fluentui-react-native-tester-bee09dc9-b280-4a47-98c5-6a1690461be4.json
@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "Split up checkbox tests into their own files",
+ "packageName": "@fluentui-react-native/tester",
+ "email": "ruaraki@microsoft.com",
+ "dependentChangeType": "patch"
+}