View profile

Form components

Form components
By Haz • Issue #2 • View online
Hi friends,
This month I’d like to share one of the most critical components of Ariakit. It’s been tested since the very first versions of Reakit. And it will finally reach its stable form in v2.

Form components
Building a form with browser validation using the Ariakit Form components.
Building a form with browser validation using the Ariakit Form components.
Haz
The Form component is finally happening:

- TypeScript support for field names.
- Accessible by default.
- Focus management.
- Native browser validation.

And more... 🧵 https://t.co/hDM3mZB7sH
This is not the regular Form library you’re used to. Ariakit will manage focus and apply aria attributes automatically.
For example, submitting an invalid form will focus on the first invalid input. Adding or removing inputs in a dynamic field list will automatically handle focus.
Besides that, the Ariakit Form takes full advantage of the native browser validation with built-in i18n. You can use native HTML props like required, minLength, maxLength, min, max, type and pattern. Unlike the native element, though, you will be able to customize the error messages with CSS.
Haz
A lot of people don't know browsers have built-in form validation. For example, we can pass a "required" attribute to a native input element to get client-side validation for free, without any JavaScript (https://t.co/WMQf7g8WUo): https://t.co/kicBVrBPZu
Of course, you can always write your custom validation logic. You can learn more about the Form components on the Twitter thread.
Twitter statistics
Here are the Twitter statistics on the Form thread if you’re curious. Twitter only shows the followers gained directly through the tweet buttons, but the actual number of new followers gained through this tweet was about 300.
Twitter stats with 813 likes, 81 retweets, 9 replies, 113k impressions, 10k engagements, 4k detail expands, 5 new direct followers, and 1.3k profile visits.
Twitter stats with 813 likes, 81 retweets, 9 replies, 113k impressions, 10k engagements, 4k detail expands, 5 new direct followers, and 1.3k profile visits.
Please, let me know if you’re interested in these statistics so I can keep sharing them in future newsletters.
What's next
Many people who need a custom select component will end up using the Menu component for that. And I’ve noticed that’s already happening with people who are testing the alpha versions of Ariakit.
Haz
Something I learned from building component libraries: if you have a dropdown menu component but you don't have a select, people will use the menu as a select no matter how much you warn against it.
Haz
Why you can't use menu as select: they behave differently and have different semantics. Also, a menu button can only contain a label. A select needs both a label and a value, which only certain HTML elements (e.g., input) or roles (e.g., combobox) support.
To solve that problem, we will have a Select component before the final release. It’s already in the works, and I’ll share more details on that next month.
Question of the month
What kind of complex widget do you need in your app, component library, or design system that would benefit from a primitive, flexible, and accessible component from Ariakit?
You can reply to this email describing your use case. Feel free to include links, images, or any other relevant details.
See you!
Did you enjoy this issue?
Haz
By Haz

Receive monthly(ish) updates about Ariakit directly in your inbox.

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Powered by Revue