# NoJS Elements Complete Documentation > NoJS Elements is a UI element plugin library for the No.JS HTML-first reactive framework. 17 declarative, accessible components — zero JavaScript required from developers. Everything is driven by HTML attributes. Requires No.JS >= 1.13.0. NoJS Elements provides drag-and-drop, form validation, tooltips, popovers, modals, dropdowns, toasts, tabs, trees, steppers, skeletons, split panes, sortable tables, accordions, breadcrumbs, scroll spy, and virtual lists. When loaded via CDN ` ``` NoJS Elements auto-installs itself when loaded via `
``` ### Validator Function Signature ```javascript NoJS.validator(name, (value, ...args, allValues) => { // value — the field value (string) // args — arguments after : in the rule (e.g., "min:5" → args = ["5"]) // allValues — object of all field values in the form { fieldName: value } // // Return: // null or true → valid // string → error message }); ``` --- ## Auto-Disable Submit Buttons Submit buttons (` ``` To opt out for a specific button, give it an explicit `disabled` expression: ```html ``` --- ## Standalone Field Validation Fields with `validate` can also be used outside a `
` for simple inline validation. ```html
``` In standalone mode, validation runs on `input` events. The error template receives `err.message` (note: `err`, not `$error`). --- ## Submit Handling The `validate` directive sets `$form.submitting = true` during the submit event, marks all fields as touched (making all errors visible), and re-validates. After the event handler completes, `$form.submitting` resets to `false` on the next animation frame. ```html
``` --- ## Complete Example ```html

Account

Shipping

``` --- # Tooltip & Popover ## `tooltip` -- Show a Tooltip on Hover/Focus ```html 🔔 ``` ### Tooltip Attributes | Attribute | Type | Default | Description | |-----------|------|---------|-------------| | `tooltip` | string | *required* | The text content displayed in the tooltip | | `tooltip-position` | `"top"` \| `"bottom"` \| `"left"` \| `"right"` | `"top"` | Placement relative to the trigger element | | `tooltip-delay` | number (ms) | `300` | Delay in milliseconds before the tooltip appears | | `tooltip-disabled` | expression | — | Reactive boolean expression. When truthy, prevents tooltip from showing | --- ## CSS Classes | Class | When Applied | |-------|-------------| | `.nojs-tooltip` | On the generated tooltip element (injected via ` ``` ### Auto-Track with Router ```html

Home page

Products page

Product detail page

``` ### Styled Breadcrumb ```html ``` --- ## API Reference | Attribute | Type | Default | Description | |-----------|------|---------|-------------| | `breadcrumb` | string (on container) | -- | Declares the breadcrumb container. On child elements, sets a custom label. | | CSS Custom Property | Default | Description | |---------------------|---------|-------------| | `--nojs-breadcrumb-separator` | `" / "` | Separator content between crumbs | | `--nojs-breadcrumb-gap` | `0.5em` | Spacing between crumbs and separators | | `--nojs-breadcrumb-active-color` | `inherit` | Color of the current (last) crumb | | ARIA Attribute | Applied to | Description | |----------------|-----------|-------------| | `aria-label="Breadcrumb"` | Container `