Smart form components
The set of Tenon-UI smart form components strive to make data management, validation and accessibility a very manageable task in React applications.
Used together these components will:
- Automatically manage the data entered in the form and expose that to you through submit events.
- Provide you with an easy to manage hierarchical validation engine that allows you to easily add your own validators and error messages.
- Provide you with everything you need to ensure that each form and form field is accessible.
Follow these steps to create powerful, accessible forms with Tenon-ui:
- If the terms render props and prop getters are not yet clear, visit the Reguired knowledge page.
- Learn how to replace your form elements with the Form component.
- Learn about our smart controllers and how they provide data, validation and accessibility management.
- Then learn how to create form elements with Tenon-UI by using the view components.
- Finally see how you can construct complex forms with accessible validation using the ErrorBlock component
Want to create your own view?
Every view component on the Tenon-UI smart form is completely replaceable.
If you want to create your own view simply make direct use of the prop getter functions as well as other props provided by the smart controllers.
You can create views for:
Disclaimer
The smart controllers provide all the function to create fully accessible form controls, however, this needs to be backed up with an accessible HTML view. We can therefore not guarantee that every view rendered with Tenon-UI will be accessible unless the supplied view components are used or mimicked exactly in terms of HTML function.
Feel free to mix up the HTML but ensure that all elements are present and that the prop getters are applied correctly.
And be sure to test with screen readers.