feat(OK-3293): CDS Input components Dropdown + Text by luiz-camargo-cb · Pull Request #678 · coinbase/cds

luiz-camargo-cb · 2026-05-13T14:59:28Z

What changed? Why?

This PR aligns TextInput, Select, and Alpha Select focus/border behavior with the latest design expectations
across mobile/web.
Main changes:

TextInput (mobile + web):
- focused border treatment for muted/foreground variants now uses the intended high-contrast active border
- readOnly and disabled states no longer enter focused visual styling (no thick/active focus border)
Select + Alpha Select (mobile):
- focused variant logic was adjusted to avoid inconsistent focus-color behavior
- disabled-state handling now uses the expected non-interactive border treatment for muted variants
Alpha Select (web):
- added runtime value-shape guards for single vs multi usage and tests

UI changes

Web	Android.	iOS
Gravacao.de.Tela.2026-05-13.as.13.33.32.mp4	Gravacao.de.Tela.2026-05-13.as.13.38.05.mp4	Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-05-13.at.13.37.35.mp4

Testing

How has it been tested?

Testing instructions

Open TextInput stories/screens on mobile and web.
Validate focused/typing state:
- default muted variants show dark/black active border (not blue)
Validate readOnly and disabled:
- no focused/thick border state appears
Open mobile Select + Alpha Select stories/screens:
- active/open state border is dark/black, not primary blue
Run:
- NX_DAEMON=false yarn nx run mobile:test --testPathPattern=packages/mobile/src/controls/__tests__/TextInput.test.tsx
- NX_DAEMON=false yarn nx run mobile:test --testPathPattern=packages/mobile/src/controls/__tests__/Select.test.tsx
- NX_DAEMON=false yarn nx run-many --target=typecheck --projects=mobile,web
- yarn nx format:write

Illustrations/Icons Checklist

Required if this PR changes files under packages/illustrations/** or packages/icons/**

verified visreg changes with Terran (include link to visreg run/approval)
all illustration/icons names have been reviewed by Dom and/or Terran

Change management

type=routine
risk=low
impact=sev5
automerge=false

Unifies the input and dropdown design updates into a single signed commit so the history is easier to audit and verify. Co-authored-by: Cursor <cursoragent@cursor.com>

Add runtime guards for Alpha Select value shape based on selection mode so invalid single/multi value combinations fail fast with clear errors. Co-authored-by: Cursor <cursoragent@cursor.com>

Prevent readonly and disabled TextInput from entering focused visual state so borders do not thicken or change color when interaction is blocked. Co-authored-by: Cursor <cursoragent@cursor.com>

cb-heimdall · 2026-05-13T14:59:35Z

🟡 Heimdall Review Status

Requirement Status More Info

Reviews

🟡 0/1

Denominator calculation

Show calculation

1 if user is bot 0

1 if user is external 0

2 if repo is sensitive 0

From .codeflow.yml 1

Additional review requirements

Show calculation

Max	0

0

From CODEOWNERS 1

Global minimum 0

Max 1

1

1 if commit is unverified 0

Sum 1

CODEOWNERS 🟡 See below

🟡 `CODEOWNERS`

Code Owner Status Calculation

ui-systems-eng-team

🟡 0/1

Denominator calculation

Additional CODEOWNERS Requirement

Show calculation

Sum	0

0

From CODEOWNERS 1

Sum 1

Unifies the input and dropdown design updates into a single signed commit so the history is easier to audit and verify. Co-authored-by: Cursor <cursoragent@cursor.com>

Add runtime guards for Alpha Select value shape based on selection mode so invalid single/multi value combinations fail fast with clear errors. Co-authored-by: Cursor <cursoragent@cursor.com>

Prevent readonly and disabled TextInput from entering focused visual state so borders do not thicken or change color when interaction is blocked. Co-authored-by: Cursor <cursoragent@cursor.com>

hcopp · 2026-05-14T12:23:39Z

  secondary: 'fg',
 };

+const defaultTextInputBorderRadius: InputStackBaseProps['borderRadius'] = 400;


@luiz-camargo-cb we would need design to reflect borderRadius of 400 before we ship this in code https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=49527-136174&m=dev

If this was for your team you could use our theming to accomplish it for your team's purposes - playground example. This might not be possible for all your current style changes, we could look to expose additional props as needed.

hcopp · 2026-05-14T12:24:39Z

    const readOnlyInputBackground = useMemo(() => {
      if (!disabled && nativeInputRestProps.readOnly) {
-        return 'bgSecondary';
+        return 'bgSecondaryWash';


This also would need to be a decision that design is in agreement for.

hcopp · 2026-05-14T12:29:46Z

      ...nativeInputRestProps
    } = mergedProps;
+    const isReadOnly = !!nativeInputRestProps.readOnly;
+    const disableFocusedStyle = disabled || isReadOnly;


When I go to Mozilla and try out

<label for="name">Name (4 to 8 characters):</label> <input type="text" id="regular" name="regular" value="regular" required minlength="4" maxlength="8" size="10" /> <input type="text" id="readonly" name="readonly" value="readonly" required minlength="4" maxlength="8" size="10" readonly /> <input type="text" id="disabled" name="disabled" value="disabled" required minlength="4" maxlength="8" size="10" disabled />

I am still able to focus on the read only input, not the disabled. It seems to me like we match this behavior - [see example playground](https://cds.coinbase.com/getting-started/playground?code=PTAEGECcFMEMBdqgJ4HsCulSoO4DtRoAPWAWwAcAbJAY1QtT2j3gGdRY8ATUAC1VQBrVgBpQ8Xs1A1YlSqBjdokABQBKcagXMuy8ZNIAoQ3Tyt4oAKIkK1UAF5Q6hwD5QAb0Oht8TARVe3qAAPABqAMrwsDSCoADmsOT27gAsAL4ugUEhACrE8ACSeOTo8FnZoJSwAEbQlPYARABK0HHoVZAN5dkAbrLo0I0wbR1dFaDAmePBeUSFxaXdQVW19c1wPADyeJTIY%2BOgfZQDQxvYO3tL3jCwXNu7S5NLM-lFJWUHlTV1jQAiAJasGrULj7cZHE4NLiA4HQUFXUDQoHVEGPKZBYLACJRGLotQAbkMaUJhhAoAAmhhQKR0OZpLJ5IpdKoNPAtEy9GhMNJULpDBzVMFrGQqEhJgSgA but let me know if you are able to focus on disabled).

adrienzheng-cb · 2026-05-14T14:04:47Z

      const toggleSelectTrayOff = useCallback(() => toggleSelectTray(false), [toggleSelectTray]);
      const toggleSelectTrayOn = useCallback(() => toggleSelectTray(true), [toggleSelectTray]);
-      const focusedVariant = useInputVariant(!!isSelectTrayOpen, variant);
+      const defaultFocusedVariant = useInputVariant(!!isSelectTrayOpen, variant);


This component is deprecated. Is it possible to migrate to use the alpha Select instead.

cb-ekuersch · 2026-05-14T17:32:16Z

 const selectTriggerMinHeight = 56;
 const selectTriggerCompactMinHeight = 40;
 const selectTriggerInsideLabelMinHeight = 62;
+const selectTriggerBorderRadius = 400;


can we make sure its possible to set borderRadius via props?

not just here specifically, but across the board on any of the components that needed to be updated

luiz-camargo-cb and others added 5 commits May 12, 2026 19:46

feat: consolidate input and dropdown updates into one signed commit

7116639

Unifies the input and dropdown design updates into a single signed commit so the history is easier to audit and verify. Co-authored-by: Cursor <cursoragent@cursor.com>

fix: enforce alpha select value type constraints

1957750

Add runtime guards for Alpha Select value shape based on selection mode so invalid single/multi value combinations fail fast with clear errors. Co-authored-by: Cursor <cursoragent@cursor.com>

fix: disable text input focus styles for readonly and disabled states

15b5f74

Prevent readonly and disabled TextInput from entering focused visual state so borders do not thicken or change color when interaction is blocked. Co-authored-by: Cursor <cursoragent@cursor.com>

chore: fix some issues at android

d03eae7

Merge branch 'coinbase:master' into master

0690547

github-actions Bot added packages:web packages:mobile labels May 13, 2026

chore: final fixes

d7494f1

luiz-camargo-cb marked this pull request as ready for review May 13, 2026 16:41

luiz-camargo-cb and others added 6 commits May 13, 2026 14:30

feat: consolidate input and dropdown updates into one signed commit

3b19331

Unifies the input and dropdown design updates into a single signed commit so the history is easier to audit and verify. Co-authored-by: Cursor <cursoragent@cursor.com>

fix: enforce alpha select value type constraints

8539223

Add runtime guards for Alpha Select value shape based on selection mode so invalid single/multi value combinations fail fast with clear errors. Co-authored-by: Cursor <cursoragent@cursor.com>

fix: disable text input focus styles for readonly and disabled states

d41d159

Prevent readonly and disabled TextInput from entering focused visual state so borders do not thicken or change color when interaction is blocked. Co-authored-by: Cursor <cursoragent@cursor.com>

chore: fix some issues at android

89d79be

chore: final fixes

4030cf2

Merge branch 'master' of github.com:luiz-camargo-cb/cds

ee2bf6a

github-actions Bot added root packages:common packages:illustrations labels May 13, 2026

luiz-camargo-cb closed this May 13, 2026

luiz-camargo-cb reopened this May 13, 2026

hcopp reviewed May 14, 2026

View reviewed changes

adrienzheng-cb reviewed May 14, 2026

View reviewed changes

cb-ekuersch reviewed May 14, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(OK-3293): CDS Input components Dropdown + Text#678

feat(OK-3293): CDS Input components Dropdown + Text#678
luiz-camargo-cb wants to merge 12 commits into
coinbase:masterfrom
luiz-camargo-cb:master

luiz-camargo-cb commented May 13, 2026 •

edited

Loading

Uh oh!

cb-heimdall commented May 13, 2026 •

edited

Loading

Uh oh!

hcopp May 14, 2026 •

edited

Loading

Uh oh!

hcopp May 14, 2026

Uh oh!

hcopp May 14, 2026

Uh oh!

adrienzheng-cb May 14, 2026

Uh oh!

cb-ekuersch May 14, 2026

Uh oh!

cb-ekuersch May 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

5 participants

Conversation

luiz-camargo-cb commented May 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What changed? Why?

UI changes

Testing

How has it been tested?

Testing instructions

Illustrations/Icons Checklist

Change management

Uh oh!

cb-heimdall commented May 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟡 Heimdall Review Status

🟡 CODEOWNERS

Uh oh!

hcopp May 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hcopp May 14, 2026

Choose a reason for hiding this comment

Uh oh!

hcopp May 14, 2026

Choose a reason for hiding this comment

Uh oh!

adrienzheng-cb May 14, 2026

Choose a reason for hiding this comment

Uh oh!

cb-ekuersch May 14, 2026

Choose a reason for hiding this comment

Uh oh!

cb-ekuersch May 14, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

5 participants

luiz-camargo-cb commented May 13, 2026 •

edited

Loading

cb-heimdall commented May 13, 2026 •

edited

Loading

🟡 `CODEOWNERS`

hcopp May 14, 2026 •

edited

Loading