feat: Select theming

packages/common/CHANGELOG.md

@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.2.0 ((5/28/2026, 10:22 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 9.1.3 ((5/28/2026, 09:35 AM PST))
 
 This is an artificial version bump with no new change.

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-common",
-  "version": "9.1.3",
+  "version": "9.2.0",
   "description": "Coinbase Design System - Common",
   "repository": {
     "type": "git",

packages/mcp-server/CHANGELOG.md

@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.2.0 ((5/28/2026, 10:22 AM PST))
+
+This is an artificial version bump with no new change.
+
 ## 9.1.3 ((5/28/2026, 09:35 AM PST))
 
 This is an artificial version bump with no new change.

packages/mcp-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mcp-server",
-  "version": "9.1.3",
+  "version": "9.2.0",
   "description": "Coinbase Design System - MCP Server",
   "repository": {
     "type": "git",

packages/mobile/CHANGELOG.md

@@ -8,6 +8,13 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 9.2.0 (5/28/2026 PST)
+
+#### 🚀 Updates
+
+- Feat: improve Select theming support. [[#733](https://github.com/coinbase/cds/pull/733)]
+- Feat: add readOnly support to Select. [[#733](https://github.com/coinbase/cds/pull/733)]
+
 ## 9.1.3 (5/28/2026 PST)
 
 #### 🐞 Fixes

packages/mobile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "9.1.3",
+  "version": "9.2.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",

packages/mobile/src/alpha/select/DefaultSelectControl.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, memo, useMemo } from 'react';
+import { forwardRef, memo, useCallback, useMemo } from 'react';
 import { Pressable, type StyleProp, TouchableOpacity, type ViewStyle } from 'react-native';
 import type { ThemeVars } from '@coinbase/cds-common/core/theme';
 import { useInputVariant } from '@coinbase/cds-common/hooks/useInputVariant';
@@ -46,6 +46,7 @@ export const DefaultSelectControlComponent = memo(
         open,
         placeholder,
         disabled,
+        readOnly,
         setOpen,
         variant,
         helperText,
@@ -57,10 +58,15 @@ export const DefaultSelectControlComponent = memo(
         compact,
         align = 'start',
         font = 'body',
+        labelColor = 'fg',
+        labelFont = 'label1',
         bordered = true,
         borderWidth = bordered ? 100 : 0,
         focusedBorderWidth = bordered ? undefined : 200,
+        inputBackground = !disabled && readOnly ? 'bgSecondary' : 'bg',
+        borderRadius,
         maxSelectedOptionsToShow = 3,
+        accessibilityHint,
         accessibilityLabel,
         hiddenSelectedOptionsLabel = 'more',
         removeSelectedOptionAccessibilityLabel = 'Remove',
@@ -76,6 +82,13 @@ export const DefaultSelectControlComponent = memo(
         ? SelectOptionValue | SelectOptionValue[] | null
         : SelectOptionValue | null;
 
+      const isInteractionBlocked = disabled || readOnly;
+
+      const handleToggleOpen = useCallback(() => {
+        if (isInteractionBlocked) return;
+        setOpen((currentOpen) => !currentOpen);
+      }, [isInteractionBlocked, setOpen]);
+
       const theme = useTheme();
       // When compact, labelVariant is ignored
       const labelVariant = compact ? undefined : labelVariantProp;
@@ -193,28 +206,52 @@ export const DefaultSelectControlComponent = memo(
 
         if (typeof label === 'string') {
           return (
-            <InputLabel color="fg" paddingY={0.5} style={styles?.controlLabelNode}>
+            <InputLabel
+              color={labelColor}
+              font={labelFont}
+              paddingY={0.5}
+              style={styles?.controlLabelNode}
+            >
               {label}
             </InputLabel>
           );
         }
 
         return label;
-      }, [shouldShowInsideLabel, shouldShowCompactLabel, label, styles?.controlLabelNode]);
+      }, [
+        shouldShowInsideLabel,
+        shouldShowCompactLabel,
+        label,
+        labelColor,
+        labelFont,
+        styles?.controlLabelNode,
+      ]);
 
       const inlineLabelNode = useMemo(() => {
         if (!shouldShowInsideLabel && !shouldShowCompactLabel) return null;
 
         if (typeof label === 'string') {
           return (
-            <InputLabel color="fg" paddingY={0} style={styles?.controlLabelNode}>
+            <InputLabel
+              color={labelColor}
+              font={labelFont}
+              paddingY={0}
+              style={styles?.controlLabelNode}
+            >
               {label}
             </InputLabel>
           );
         }
 
         return label;
-      }, [shouldShowInsideLabel, shouldShowCompactLabel, label, styles?.controlLabelNode]);
+      }, [
+        shouldShowInsideLabel,
+        shouldShowCompactLabel,
+        label,
+        labelColor,
+        labelFont,
+        styles?.controlLabelNode,
+      ]);
 
       const valueAlignment = useMemo(
         () => (align === 'end' ? 'flex-end' : align === 'center' ? 'center' : 'flex-start'),
@@ -255,10 +292,14 @@ export const DefaultSelectControlComponent = memo(
                     disabled={disabled || option.disabled}
                     invertColorScheme={false}
                     maxWidth={200}
-                    onPress={(event) => {
-                      event?.stopPropagation();
-                      onChange?.(option.value as ValueType);
-                    }}
+                    onPress={
+                      isInteractionBlocked
+                        ? undefined
+                        : (event) => {
+                            event?.stopPropagation();
+                            onChange?.(option.value as ValueType);
+                          }
+                    }
                   >
                     {option.label ?? option.description ?? option.value ?? ''}
                   </InputChip>
@@ -294,6 +335,7 @@ export const DefaultSelectControlComponent = memo(
         removeSelectedOptionAccessibilityLabel,
         disabled,
         onChange,
+        isInteractionBlocked,
       ]);
 
       // onBlur/onFocus on ViewProps allow null returns but TouchableOpacity's onBlur/onFocus props do not.
@@ -302,14 +344,14 @@ export const DefaultSelectControlComponent = memo(
         () => (
           <TouchableOpacity
             ref={ref}
+            accessibilityHint={accessibilityHint}
             accessibilityLabel={computedControlAccessibilityLabel}
             accessibilityRole="button"
             disabled={disabled}
             onBlur={onBlur ?? undefined}
             onFocus={onFocus ?? undefined}
-            onPress={() => setOpen((s) => !s)}
+            onPress={handleToggleOpen}
             style={[{ flexGrow: 1 }, styles?.controlInputNode]}
-            {...props}
           >
             <HStack
               alignItems="center"
@@ -367,22 +409,22 @@ export const DefaultSelectControlComponent = memo(
         ),
         [
           ref,
+          accessibilityHint,
           computedControlAccessibilityLabel,
           disabled,
           onBlur,
           onFocus,
           styles?.controlInputNode,
           styles?.controlStartNode,
           styles?.controlValueNode,
-          props,
           startNode,
           shouldShowCompactLabel,
           shouldShowInsideLabel,
           inlineLabelNode,
           valueAlignment,
           valueNode,
           contentNode,
-          setOpen,
+          handleToggleOpen,
         ],
       );
 
@@ -391,26 +433,19 @@ export const DefaultSelectControlComponent = memo(
           <Pressable
             accessible={customEndNode ? true : false}
             disabled={disabled}
-            onPress={() => setOpen((s) => !s)}
+            onPress={handleToggleOpen}
           >
             <HStack
               alignItems="center"
               flexGrow={1}
               paddingStart={2}
               style={styles?.controlEndNode}
             >
-              {customEndNode ? (
-                customEndNode
-              ) : (
-                <AnimatedCaret
-                  color={!open ? 'fg' : variant ? variantColor[variant] : 'fgPrimary'}
-                  rotate={open ? 0 : 180}
-                />
-              )}
+              {customEndNode ? customEndNode : <AnimatedCaret color="fg" rotate={open ? 0 : 180} />}
             </HStack>
           </Pressable>
         ),
-        [styles?.controlEndNode, disabled, customEndNode, open, variant, setOpen],
+        [styles?.controlEndNode, disabled, customEndNode, open, handleToggleOpen],
       );
 
       const inputStackStyles: StyleProp<ViewStyle> = useMemo(
@@ -426,18 +461,21 @@ export const DefaultSelectControlComponent = memo(
       return (
         <InputStack
           borderFocusedStyle={borderFocusedStyle}
+          borderRadius={borderRadius}
           borderStyle={borderUnfocusedStyle}
           borderWidth={borderWidth}
           disabled={disabled}
           endNode={endNode}
-          focused={open}
+          focused={open && !readOnly}
           focusedBorderWidth={focusedBorderWidth}
           helperTextNode={helperTextNode}
+          inputBackground={inputBackground}
           inputNode={inputNode}
           labelNode={labelNode}
           labelVariant={labelVariant}
           onBlur={onBlur}
           onFocus={onFocus}
+          style={style}
           styles={{ input: inputStackStyles }}
           variant={variant}
           {...props}

packages/mobile/src/alpha/select/Select.tsx

@@ -62,6 +62,7 @@ const SelectBase = memo(
         open: openProp,
         setOpen: setOpenProp,
         disabled,
+        readOnly,
         disableClickOutsideClose,
         placeholder,
         helperText,
@@ -88,6 +89,12 @@ const SelectBase = memo(
         align,
         font,
         bordered = true,
+        borderWidth,
+        focusedBorderWidth,
+        inputBackground,
+        labelColor,
+        labelFont,
+        borderRadius,
         SelectOptionComponent = DefaultSelectOption,
         SelectAllOptionComponent = DefaultSelectAllOption,
         SelectDropdownComponent = DefaultSelectDropdown,
@@ -97,7 +104,6 @@ const SelectBase = memo(
         style,
         styles,
         testID,
-        ...props
       } = mergedProps;
       const [openInternal, setOpenInternal] = useState(defaultOpen ?? false);
       const open = openProp ?? openInternal;
@@ -179,20 +185,27 @@ const SelectBase = memo(
             accessibilityLabel={accessibilityLabel}
             align={align}
             blendStyles={styles?.controlBlendStyles}
+            borderRadius={borderRadius}
+            borderWidth={borderWidth}
             bordered={bordered}
             compact={compact}
             disabled={disabled}
             endNode={endNode}
+            focusedBorderWidth={focusedBorderWidth}
             font={font}
             helperText={helperText}
             hiddenSelectedOptionsLabel={hiddenSelectedOptionsLabel}
+            inputBackground={inputBackground}
             label={label}
+            labelColor={labelColor}
+            labelFont={labelFont}
             labelVariant={labelVariant}
             maxSelectedOptionsToShow={maxSelectedOptionsToShow}
             onChange={onChange}
-            open={open}
+            open={open && !readOnly}
             options={options}
             placeholder={placeholder}
+            readOnly={readOnly}
             removeSelectedOptionAccessibilityLabel={removeSelectedOptionAccessibilityLabel}
             setOpen={setOpen}
             startNode={startNode}
@@ -219,7 +232,7 @@ const SelectBase = memo(
             label={label}
             media={media}
             onChange={onChange}
-            open={open}
+            open={open && !readOnly}
             options={options}
             selectAllLabel={selectAllLabel}
             setOpen={setOpen}