feat(forms): add SelectField for labelled, accessible selects by talissoncosta · Pull Request #8101 · Flagsmith/flagsmith

talissoncosta · 2026-07-24T18:38:35Z

Thanks for submitting a PR! Please check the boxes below:

I have read the Contributing Guide.
I have added information to docs/ if required so people know about the feature.
I have filled in the "Changes" section below.
I have filled in the "How did you test this code" section below.

Changes

Contributes to #7364

Adds SelectField, the design-system counterpart to InputGroup for a react-select control.

Today, a labelled select is built as <InputGroup component={<Select />} />. That slot renders the control with no accessibility wiring: the label's htmlFor points at an id nothing has, the select is never marked invalid, and the error text is not linked to it. SelectField wires all of it off one id: label htmlFor to the select's inputId, plus aria-invalid and aria-errormessage to the FieldError.

This is a first cut. No call sites are migrated yet. The error-state styling (so consumers stop hand-rolling the red border via react-select styles) and verifying the exact aria forwarding through react-select v5 are deliberate follow-ups, kept out to keep this reviewable. The full plan to retire the component prop is in frontend/SELECT_FIELD_MIGRATION.md.

How did you test this code?

Manually, via the Storybook story (Components/Forms/SelectField): Default, Required, WithTooltip, WithError, Disabled. Lint passes on the new files. Note the repo's local tsc baseline is noisy in a fresh worktree, so CI typecheck is the authority here; SelectField.tsx introduces no new errors.

Adds a SelectField component: the design-system counterpart to InputGroup for a react-select control. It wires the label, inline error, and aria relationships off a single id (htmlFor -> inputId, aria-invalid, aria-errormessage), which the InputGroup `component` slot does not do. First cut only. No call sites migrated yet; the error-state styling and react-select aria verification are follow-ups tracked in SELECT_FIELD_MIGRATION.md. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

vercel · 2026-07-24T18:38:40Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
flagsmith-frontend-preview	Ready	Preview, Comment	Jul 28, 2026 5:16pm
flagsmith-frontend-staging	Ready	Preview, Comment	Jul 28, 2026 5:16pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Ignored	Preview	Jul 28, 2026 5:16pm

coderabbitai · 2026-07-24T18:38:42Z

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 0ceca54f-9424-4bf3-8ddb-48af9ff8a632

📥 Commits

Reviewing files that changed from the base of the PR and between 80e50a2 and 502632c.

📒 Files selected for processing (2)

frontend/documentation/components/SelectField.stories.tsx
frontend/web/components/base/forms/SelectField.tsx

📝 Walkthrough

Walkthrough

Adds a generic SelectField React component that wraps react-select with generated or supplied IDs, optional labels and tooltips, error rendering, ARIA error attributes, and consistent form spacing. Adds Storybook metadata and five stories covering default, required, tooltip, error, and disabled configurations.

Estimated code review effort: 2 (Simple) | ~10 minutes

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

Records the decision to drop the Select E2E (TestCafe-era) fork in its own Select-only PR, after the SelectField call-site migration. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Target selects by role and accessible name rather than data-test, so the E2E suite doubles as an accessibility regression guard. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

github-actions · 2026-07-28T17:16:46Z

Docker builds report

Image	Build Status	Security report
`ghcr.io/flagsmith/flagsmith-api-test:pr-8101`	Finished ✅	Skipped
`ghcr.io/flagsmith/flagsmith-e2e:pr-8101`	Finished ✅	Skipped
`ghcr.io/flagsmith/flagsmith-api:pr-8101`	Finished ✅	Results ✅
`ghcr.io/flagsmith/flagsmith-private-cloud:pr-8101`	Finished ✅	Results ✅
`ghcr.io/flagsmith/flagsmith:pr-8101`	Finished ✅	Results ✅
`ghcr.io/flagsmith/flagsmith-frontend:pr-8101`	Finished ✅	Results ✅

github-actions · 2026-07-28T17:23:06Z

✅ private-cloud · depot-ubuntu-latest-arm-16 — run #18799 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

2 passed

Details

2 tests across 2 suites
1 minute, 1 second
502632c
🔄 Run: #18799 (attempt 1)

🗂️ Previous results

✅ private-cloud · depot-ubuntu-latest-16 — run #18799 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

4 passed

Details

4 tests across 4 suites
32.5 seconds
502632c
🔄 Run: #18799 (attempt 1)

✅ oss · depot-ubuntu-latest-16 — run #18799 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

1 passed

Details

1 test across 1 suite
42.2 seconds
502632c
🔄 Run: #18799 (attempt 1)

✅ oss · depot-ubuntu-latest-arm-16 — run #18799 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

1 passed

Details

1 test across 1 suite
45.1 seconds
502632c
🔄 Run: #18799 (attempt 1)

github-actions · 2026-07-28T17:23:32Z

Visual Regression

19 screenshots compared. See report for details.
View full report

github-actions Bot added the front-end Issue related to the React Front End Dashboard label Jul 24, 2026

vercel Bot deployed to Preview – flagsmith-frontend-preview July 24, 2026 18:39 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-staging July 24, 2026 18:39 View deployment

github-actions Bot added the feature New feature or request label Jul 24, 2026

docs(forms): note the Select E2E fork-drop as a sequenced follow-up

d8cd50e

Records the decision to drop the Select E2E (TestCafe-era) fork in its own Select-only PR, after the SelectField call-site migration. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

vercel Bot deployed to Preview – flagsmith-frontend-preview July 24, 2026 18:45 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-staging July 24, 2026 18:45 View deployment

github-actions Bot added feature New feature or request and removed feature New feature or request labels Jul 24, 2026

docs(forms): prefer a11y/role selectors for the Select E2E follow-up

1d8ee58

Target selects by role and accessible name rather than data-test, so the E2E suite doubles as an accessibility regression guard. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

vercel Bot deployed to Preview – flagsmith-frontend-staging July 24, 2026 18:46 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview July 24, 2026 18:47 View deployment

github-actions Bot added feature New feature or request and removed feature New feature or request labels Jul 24, 2026

chore(forms): keep the SelectField migration plan as a local working doc

502632c

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

This was referenced Jul 27, 2026

refactor(forms): migrate custom InputGroup component sites to FieldLabel #8117

Closed

Add SelectField: labelled, accessible select #8121

Open

talissoncosta linked an issue Jul 27, 2026 that may be closed by this pull request

Add SelectField: labelled, accessible select #8121

Open

talissoncosta marked this pull request as ready for review July 28, 2026 17:15

talissoncosta requested a review from a team as a code owner July 28, 2026 17:15

talissoncosta requested review from Zaimwa9 and kyle-ssg and removed request for a team July 28, 2026 17:15

talissoncosta marked this pull request as draft July 28, 2026 17:16

vercel Bot deployed to Preview – flagsmith-frontend-staging July 28, 2026 17:16 View deployment

vercel Bot deployed to Preview – flagsmith-frontend-preview July 28, 2026 17:16 View deployment

talissoncosta closed this Jul 28, 2026

github-actions Bot added feature New feature or request and removed feature New feature or request labels Jul 28, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(forms): add SelectField for labelled, accessible selects - #8101

feat(forms): add SelectField for labelled, accessible selects#8101
talissoncosta wants to merge 4 commits into
mainfrom
feat/select-field-7364

talissoncosta commented Jul 24, 2026

Uh oh!

vercel Bot commented Jul 24, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jul 24, 2026 •

edited

Loading

Review failed

Walkthrough

Uh oh!

github-actions Bot commented Jul 28, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 28, 2026 •

edited

Loading

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

Details

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

Details

Playwright Test Results (oss - depot-ubuntu-latest-16)

Details

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

Details

Uh oh!

github-actions Bot commented Jul 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

talissoncosta commented Jul 24, 2026

Changes

How did you test this code?

Uh oh!

vercel Bot commented Jul 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jul 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Uh oh!

github-actions Bot commented Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Docker builds report

Uh oh!

github-actions Bot commented Jul 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

Details

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

Details

Playwright Test Results (oss - depot-ubuntu-latest-16)

Details

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

Details

Uh oh!

github-actions Bot commented Jul 28, 2026

Visual Regression

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

vercel Bot commented Jul 24, 2026 •

edited

Loading

coderabbitai Bot commented Jul 24, 2026 •

edited

Loading

github-actions Bot commented Jul 28, 2026 •

edited

Loading

github-actions Bot commented Jul 28, 2026 •

edited

Loading