feat(checkbox): add error state via MD3 error tokens

Adds an `error?: boolean` prop to Checkbox, CheckboxAndroid, and
CheckboxIOS. When true, the outline (unchecked) and container (checked /
indeterminate) use `theme.colors.error`. The `disabled` state and
explicit `color` / `uncheckedColor` overrides take precedence.

Addresses one bullet from #4937 / #4949 (Checkbox section,
"Error state not implemented"). Verified visually on iOS Simulator
and Android Emulator across light and dark themes.

Author: fabriziocucci

src/components/Checkbox/Checkbox.tsx

@@ -27,6 +27,13 @@ export type Props = {
    * Custom color for checkbox.
    */
   color?: string;
+  /**
+   * Whether the checkbox is in an error state. When true, the outline
+   * (unchecked) and container (checked / indeterminate) use
+   * `theme.colors.error`. `disabled` and explicit `color`/`uncheckedColor`
+   * overrides take precedence.
+   */
+  error?: boolean;
   /**
    * @optional
    */

src/components/Checkbox/CheckboxAndroid.tsx

@@ -34,6 +34,13 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
    * Custom color for checkbox.
    */
   color?: ColorValue;
+  /**
+   * Whether the checkbox is in an error state. When true, the outline
+   * (unchecked) and container (checked / indeterminate) use
+   * `theme.colors.error`. `disabled` and explicit `color`/`uncheckedColor`
+   * overrides take precedence.
+   */
+  error?: boolean;
   /**
    * @optional
    */
@@ -60,6 +67,7 @@ const CheckboxAndroid = ({
   disabled,
   onPress,
   testID,
+  error,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -107,6 +115,7 @@ const CheckboxAndroid = ({
       checked,
       customColor: rest.color,
       customUncheckedColor: rest.uncheckedColor,
+      error,
     });
 
   const borderWidth = scaleAnim.interpolate({

src/components/Checkbox/CheckboxIOS.tsx

@@ -29,6 +29,12 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
    * Custom color for checkbox.
    */
   color?: ColorValue;
+  /**
+   * Whether the checkbox is in an error state. When true, the checked /
+   * indeterminate icon uses `theme.colors.error`. `disabled` and explicit
+   * `color` overrides take precedence.
+   */
+  error?: boolean;
   /**
    * @optional
    */
@@ -52,16 +58,18 @@ const CheckboxIOS = ({
   onPress,
   theme: themeOverrides,
   testID,
+  error,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const checked = status === 'checked';
   const indeterminate = status === 'indeterminate';
 
-  const { checkedColor } = getSelectionControlIOSColor({
+  const { checkedColor, checkedColorOpacity } = getSelectionControlIOSColor({
     theme,
     disabled,
     customColor: rest.color,
+    error,
   });
 
   const icon = indeterminate ? 'minus' : 'check';

src/components/Checkbox/utils.ts

@@ -8,28 +8,40 @@ const { stateOpacity } = tokens.md.ref;
 const getAndroidCheckedColor = ({
   theme,
   customColor,
+  error,
 }: {
   theme: InternalTheme;
   customColor?: ColorValue;
+  error?: boolean;
 }) => {
   if (customColor) {
     return customColor;
   }
 
+  if (error) {
+    return theme.colors.error;
+  }
+
   return theme.colors.primary;
 };
 
 const getAndroidUncheckedColor = ({
   theme,
   customUncheckedColor,
+  error,
 }: {
   theme: InternalTheme;
   customUncheckedColor?: ColorValue;
+  error?: boolean;
 }) => {
   if (customUncheckedColor) {
     return customUncheckedColor;
   }
 
+  if (error) {
+    return theme.colors.error;
+  }
+
   return theme.colors.onSurfaceVariant;
 };
 
@@ -62,17 +74,20 @@ export const getAndroidSelectionControlColor = ({
   checked,
   customColor,
   customUncheckedColor,
+  error,
 }: {
   theme: InternalTheme;
   checked: boolean;
   disabled?: boolean;
   customColor?: ColorValue;
   customUncheckedColor?: ColorValue;
+  error?: boolean;
 }) => {
-  const checkedColor = getAndroidCheckedColor({ theme, customColor });
+  const checkedColor = getAndroidCheckedColor({ theme, customColor, error });
   const uncheckedColor = getAndroidUncheckedColor({
     theme,
     customUncheckedColor,
+    error,
   });
   const selectionControlOpacity = disabled
     ? stateOpacity.disabled
@@ -94,10 +109,12 @@ const getIOSCheckedColor = ({
   theme,
   disabled,
   customColor,
+  error,
 }: {
   theme: InternalTheme;
   customColor?: ColorValue;
   disabled?: boolean;
+  error?: boolean;
 }) => {
   if (disabled) {
     return theme.colors.primary;
@@ -107,19 +124,25 @@ const getIOSCheckedColor = ({
     return customColor;
   }
 
+  if (error) {
+    return theme.colors.error;
+  }
+
   return theme.colors.primary;
 };
 
 export const getSelectionControlIOSColor = ({
   theme,
   disabled,
   customColor,
+  error,
 }: {
   theme: InternalTheme;
   disabled?: boolean;
   customColor?: ColorValue;
+  error?: boolean;
 }) => {
-  const checkedColor = getIOSCheckedColor({ theme, disabled, customColor });
+  const checkedColor = getIOSCheckedColor({ theme, disabled, customColor, error });
   const checkedColorOpacity = disabled
     ? stateOpacity.disabled
     : stateOpacity.enabled;