Skip to content

feat: Add FormControl components with comprehensive accessibility support#1098

Merged
cheton merged 2 commits intov2from
feat/form-control
Feb 9, 2026
Merged

feat: Add FormControl components with comprehensive accessibility support#1098
cheton merged 2 commits intov2from
feat/form-control

Conversation

@cheton
Copy link
Member

@cheton cheton commented Feb 3, 2026

Summary

This PR ports the FormControl component system from Tonic One to Tonic UI, moving it from experimental to production status. The FormControl system provides accessible, composable form fields with automatic context management and consistent styling.

Changes

  • FormControl - Context provider managing form field state and accessibility
  • FormLabel - Label with required indicator and automatic field association
  • FormInput - Input wrapper with automatic prop injection
  • FormTextarea - Textarea wrapper with automatic prop injection
  • FormErrorMessage - Error display supporting single/multiple errors
  • FormHelperText - Helper text for form guidance
  • FormCharacterCount - Character counter with over-limit styling
  • useFormControl - Hook to access FormControl context

@codesandbox
Copy link

codesandbox bot commented Feb 3, 2026

Review or Edit in CodeSandbox

Open the branch in Web EditorVS CodeInsiders

Open Preview

@changeset-bot
Copy link

changeset-bot bot commented Feb 3, 2026

🦋 Changeset detected

Latest commit: fd2b8d4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@tonic-ui/react Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@cheton cheton self-assigned this Feb 3, 2026
@codesandbox-ci
Copy link

codesandbox-ci bot commented Feb 3, 2026

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

@vercel
Copy link

vercel bot commented Feb 3, 2026

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

Project Deployment Actions Updated (UTC)
tonic-ui Ready Ready Preview, Comment Feb 9, 2026 2:43pm

@codecov
Copy link

codecov bot commented Feb 3, 2026

Bundle Report

Changes will increase total bundle size by 32.84kB (1.13%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
@tonic-ui/react-cjs 895.97kB 17.07kB (1.94%) ⬆️
@tonic-ui/react-esm 841.27kB 15.76kB (1.91%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: @tonic-ui/react-esm

Assets Changed:

Asset Name Size Change Total Size Change (%)
index.js 606 bytes 12.43kB 5.13% ⚠️
form-*.js (New) 1.54kB 1.54kB 100.0% 🚀
form-*.js (New) 2.06kB 2.06kB 100.0% 🚀
form-*.js (New) 1.87kB 1.87kB 100.0% 🚀
form-*.js (New) 3.68kB 3.68kB 100.0% 🚀
form-*.js (New) 399 bytes 399 bytes 100.0% 🚀
form-*.js (New) 1.26kB 1.26kB 100.0% 🚀
form-*.js (New) 2.02kB 2.02kB 100.0% 🚀
form-*.js (New) 221 bytes 221 bytes 100.0% 🚀
form-*.js (New) 127 bytes 127 bytes 100.0% 🚀
form-*.js (New) 197 bytes 197 bytes 100.0% 🚀
form-*.js (New) 1.78kB 1.78kB 100.0% 🚀

Files in form-*.js:

  • ./src/form-control/FormLabel.js → Total Size: 1.0kB

Files in form-*.js:

  • ./src/form-control/FormControl.js → Total Size: 1.59kB

Files in form-*.js:

  • ./src/form-control/FormCharacterCount.js → Total Size: 1.33kB

Files in form-*.js:

  • ./src/form-control/FormHelperText.js → Total Size: 799 bytes

Files in form-*.js:

  • ./src/form-control/FormErrorMessage.js → Total Size: 1.44kB

Files in form-*.js:

  • ./src/form-control/FormTextarea.js → Total Size: 80 bytes

Files in form-*.js:

  • ./src/form-control/FormInput.js → Total Size: 68 bytes
view changes for bundle: @tonic-ui/react-cjs

Assets Changed:

Asset Name Size Change Total Size Change (%)
index.js 820 bytes 16.91kB 5.1% ⚠️
form-*.js (New) 4.06kB 4.06kB 100.0% 🚀
form-*.js (New) 415 bytes 415 bytes 100.0% 🚀
form-*.js (New) 1.94kB 1.94kB 100.0% 🚀
form-*.js (New) 1.34kB 1.34kB 100.0% 🚀
form-*.js (New) 1.69kB 1.69kB 100.0% 🚀
form-*.js (New) 237 bytes 237 bytes 100.0% 🚀
form-*.js (New) 157 bytes 157 bytes 100.0% 🚀
form-*.js (New) 213 bytes 213 bytes 100.0% 🚀
form-*.js (New) 2.18kB 2.18kB 100.0% 🚀
form-*.js (New) 2.18kB 2.18kB 100.0% 🚀
form-*.js (New) 1.85kB 1.85kB 100.0% 🚀

Files in form-*.js:

  • ./src/form-control/FormCharacterCount.js → Total Size: 1.49kB

Files in form-*.js:

  • ./src/form-control/FormHelperText.js → Total Size: 934 bytes

Files in form-*.js:

  • ./src/form-control/FormLabel.js → Total Size: 1.24kB

Files in form-*.js:

  • ./src/form-control/FormTextarea.js → Total Size: 80 bytes

Files in form-*.js:

  • ./src/form-control/FormInput.js → Total Size: 68 bytes

Files in form-*.js:

  • ./src/form-control/FormErrorMessage.js → Total Size: 1.68kB

Files in form-*.js:

  • ./src/form-control/FormControl.js → Total Size: 1.79kB

@codecov
Copy link

codecov bot commented Feb 5, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 81.72%. Comparing base (55d7b7a) to head (fd2b8d4).
⚠️ Report is 1 commits behind head on v2.

Additional details and impacted files
@@            Coverage Diff             @@
##               v2    #1098      +/-   ##
==========================================
+ Coverage   81.57%   81.72%   +0.15%     
==========================================
  Files         444      446       +2     
  Lines        7560     7563       +3     
  Branches       48       48              
==========================================
+ Hits         6167     6181      +14     
+ Misses       1375     1364      -11     
  Partials       18       18              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@trendmicro-frontend-bot
Copy link
Contributor

trendmicro-frontend-bot commented Feb 5, 2026

Tonic UI Demo

On 2026-02-09 15:11:03 +0000, PR #1098 (fd2b8d4) was successfully deployed. You can view it at the following link:
https://trendmicro-frontend.github.io/tonic-ui-demo/react/pr-1098/

cheton and others added 2 commits February 9, 2026 22:40
…upport

This commit adds the FormControl component system to Tonic-UI, migrating it from experimental to production status.

Key changes:
- Add 8 form control components (FormControl, FormLabel, FormInput, FormTextarea, FormErrorMessage, FormHelperText, FormCharacterCount)
- Add useFormControl hook for context access
- Add comprehensive test suite (10 test cases)
- Add complete documentation with 11 interactive examples
- Remove experimental form-control files
- Update package exports and configuration

The FormControl system provides accessible, composable form fields with automatic ID generation, ARIA attribute management, and context-based state management.

Co-Authored-By: Claude Sonnet 4.5 (1M context) <noreply@anthropic.com>
The experimental form-control components are no longer needed after
the feature was promoted to the main package.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
@cheton cheton force-pushed the feat/form-control branch from 5c9cb18 to fd2b8d4 Compare February 9, 2026 14:40
@cheton cheton merged commit 326bdc4 into v2 Feb 9, 2026
11 of 12 checks passed
@cheton cheton deleted the feat/form-control branch February 9, 2026 15:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants