Feat display base UI

[Atchferox]

🎨 Showcase: Base UI Integration for Form Components

Summary

This PR demonstrates how we can leverage Base UI (@base-ui/react) as the foundation for our form components instead of building everything from scratch.

Why Base UI?

Our current form components (as noted in the README) are not production-ready and were only meant as template placeholders. Rather than investing time building our own primitives, Base UI offers:

• Unstyled, accessible primitives – Full control over styling while getting accessibility out of the box
• React 19 compatible – First-class support for the latest React features
• Lightweight – No bloated CSS; we bring our own styles via SCSS modules
• Headless architecture – Flexibility to match our design system without fighting component defaults

What's Included

• Added @base-ui/react as a dependency
• Migrated the Input component to use Base UI's Input primitive
• Added the Field component for better form handling
• Other components (Button, Select, Field) remain as reference implementations showing how they could similarly be migrated

Next Steps

This is a proof of concept. If the team is happy with this approach, we can:

1. Migrate remaining form components (Button, Select, etc.) to Base UI primitives
2. Leverage more complex Base UI components (Dialog, Menu, Tabs, etc.) as needed
3. Remove the custom implementations marked as "not ready for production"

Related

• 📖 Base UI Documentation
• 📝 See src/components/form/README.md for the original TODO

[maanlamp]

@publicJorn I asked Luuk to create an example of using baseui for our template, to see what that would look like, and how it would integrate with our existing development chain.

I'm really excited about this, I think this will save us a lot of time. It does look a bit verbose with lots of indirection, but as long as it's a one-time setup that you can easily style to fit any project's design, I'm heavily in favour of ditching our home-grown stuff and using this instead.

I understand you asked Luuk to do a talk about this as well? Maybe we keep this open until after to see what the feedback is?

[maanlamp]

I Like the markup, and how this makes the base components someone else's problem 👍. Maybe we can take the time to move all custom components to base-ui in this PR?

[publicJorn]

@Atchferox @maanlamp I like it. But to implement we have to make some descisions. I started a discussion thread where we can work out some ideas: #35.

I prefer not to merge this as-is, because I want it to be ready usable. Also I think (if we make components) they would be better served from an external repo. But lets pick it up in the discussion thread.

Shall we close this PR? we can keep it open and depending on what we choose as resolution update or close it.

[publicJorn]

See comment #30 (comment).
"Request changes" is here just so that we don't merge it yet by accident.

[maanlamp]

I really don't agree that we need to decide on anything you've posed before we start using this. I'll respond in more detail in the discussion, but I want to make my position clear here. I think we should add a little documentation regarding how we would use this, and just start using it.