Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA form split across tabs that validates every tab on submit, shows error counts in the tab names and jumps focus to the first invalid field, with all panels kept mounted.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use this for long forms (account, billing, preferences) where a validation error on a hidden tab would otherwise make Save look broken.
Do not use it for short forms, which belong on one page without tabs.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
tabs | { value, label, fields: { name, label, required? }[] }[] | - | The tabs and their fields. |
onSubmit | (values: Record<string, string>) => void | - | Called when every required field is filled. |
aria-invalid and a linked message.forceMount with hidden, so values typed on other tabs are part of the submit and survive.| Key | Action |
|---|---|
| Enter in a field | submits |
| Tab | between fields and tabs |
The pattern ships a Testing Library test (tabs-error-badges.test.tsx) that covers error counts, jumping to the first invalid field, linked messages and keeping values across tabs.