fix: make radios and checkboxes actually clickable

[wenxi-onyx]

Description

• Original issue: certain radios/checkboxes required users to click specifically just the box component

• Nested labels cause text to not be clickable

• Introduce htmlFor that associates html elements with the form input item using a unique id

• CheckField.tsx had bugged logic that reset the form value on click

How Has This Been Tested?

• locally

Backporting (check the box to trigger backport action)

Note: You have to check that the action passes, otherwise resolve the conflicts manually and tag the patches.

• This PR should be backported (make sure to check that the backport attempt succeeds)
• [Optional] Override Linear Check

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
internal-search	Error			Sep 1, 2025 0:20am

[cubic-dev-ai]

No issues found across 4 files

[evan-onyx]

l e g e n d a r y

[greptile-apps]

Greptile Summary

This PR fixes a critical UX/accessibility issue where checkbox and radio button labels were not clickable, forcing users to click precisely on the small form control elements instead of their associated text labels. The root cause was nested label elements and missing proper form association (htmlFor/id attributes).

The changes implement proper HTML form semantics across multiple UI components:

1. CheckField.tsx: Fixed a logic bug where the onChange callback received the old value instead of the new toggled value, and added proper id/htmlFor association between the checkbox and its label
2. Field.tsx: Completely restructured the BooleanFormField component to remove nested labels, added htmlFor prop to Label component, and generated stable unique IDs for form controls
3. SettingsForm.tsx & CredentialFields.tsx: Replaced Label components with span elements to prevent nested label conflicts while maintaining styling
4. E2E tests: Updated checkbox locators to use role-based selectors that align with the new accessible DOM structure

These changes ensure that clicking anywhere on a checkbox or radio button's label text will properly toggle the form control, significantly improving user experience and WCAG compliance. The implementation uses standard HTML form association patterns with id/htmlFor attributes to create the proper semantic relationship between labels and their corresponding inputs.

Confidence score: 3/5

• This PR addresses important UX issues but has some implementation inconsistencies that could cause accessibility problems
• Score reflects mixed quality of solutions - some files implement proper htmlFor/id associations while others just avoid the problem by removing labels
• Pay close attention to CredentialFields.tsx which removes label association without adding proper id/htmlFor attributes

_{5 files reviewed, no comments}

_{Edit Code Review Bot Settings | Greptile}