Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA labelled form field with a folder tree select, helper text and a required error. Use this when a form needs one folder and the field must work with a label, hint and validation like any other.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it inside forms that save, export or upload somewhere: it lines up with the other fields and reports errors the same way.
Do not use it when the tree is the main thing on the page (use tree-view), or to choose several folders (use tree-select with multiple).
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 |
|---|---|---|---|
folders | TreeNode[] | - | The folder tree. |
label | string | - | Visible label. |
value / defaultValue / onValueChange | string | null | null | The chosen folder id. |
hint | string | - | Helper text. |
error | string | - | Replaces the hint, in red, as an alert. |
required | boolean | false | Adds a marker and aria-required. |
aria-labelledby); the hint or error is its description (aria-describedby).role="alert" message and sets aria-invalid.aria-required carries the meaning.The pattern ships with a Testing Library test (destination-folder-field.test.tsx) that covers the label, the hint, the error and choosing a folder.