Every component renders a full field: wrapper, optional label, the control, a validation border and an error slot — all themed. Names map onto Laravel's request payload exactly as you'd expect, including nested array names like user[26][name].

Shared field props (from InputMain): id · name · label · value · placeholder · :required · :disabled · :readonly · :hidden · class · wrapperClass · labelClass · tooltip · :enableError · :hasTopMargins · :populate · :disableJsValidation.

Conventions. Write string attributes plainly (label="Email"); add a : prefix to bind booleans, numbers, arrays and PHP expressions (:required="true", :options="[...]"). camelCase props are written in kebab-case in Blade — wrapperClass → wrapper-class, hasTopMargins → :has-top-margins, requirementsText → requirements-text. Any attribute not listed below lands on the underlying element as a plain HTML attribute (see Arbitrary HTML attributes pass-through).

Shared — every field input (from InputMain)

Applies to all field components below (text, number, date, select, file, checkbox, radio, repeatable…) unless noted.

Text-like — <x-roro-text> <x-roro-email> <x-roro-password> <x-roro-url> <x-roro-tel> <x-roro-hidden>

No extra attributes — shared only. They differ purely by their HTML type (text/email/password/url/tel/hidden).

Numeric & date/time — <x-roro-number> <x-roro-range> <x-roro-date> <x-roro-time> <x-roro-datetime-local> <x-roro-week> <x-roro-month> (from NumericMain)

Shared plus:

Color — <x-roro-color>

Shared plus:

Checkbox — <x-roro-checkbox> (from CheckableMain)

Shared (with value defaulting to '1') plus:

Radio group — <x-roro-radio-container> + <x-roro-radio>

<x-roro-radio-container> wraps the group in a <fieldset>/<legend>; each <x-roro-radio> is one option (it's a CheckableMain, so its value is the option value and :checked flags the default).

<x-roro-radio-container> — shared plus:

<x-roro-radio> — shared (with value = the option value) plus :checked (bool, false).

Selects — <x-roro-select> <x-roro-multi-select> (from SelectableMain)

Shared plus (for the multi-select, end the name with []):

File — <x-roro-file>

Shared plus:

Repeatable — <x-roro-repeatable>

Forwards the shared field props (except value/placeholder — a repeatable holds rows, not one value) plus:

Button — <x-roro-button>

A standalone ComponentMain (not an InputMain):

Form — <x-roro-form>

Options are rendered server-side, then read and enhanced by JS. No flash of an empty dropdown, no mandatory network round-trip — and the basic value is present even before JS runs.

{{-- flat options --}}
<x-roro-select name="country" :options="['fr' => 'France', 'es' => 'Spain']" value="fr"/>

{{-- grouped options --}}
<x-roro-select name="city" label="City"
    :options="['Europe' => ['par' => 'Paris', 'mad' => 'Madrid'],
               'Asia'   => ['tok' => 'Tokyo']]"/>

{{-- multi-select with pre-selected tags (note the [] in the name) --}}
<x-roro-multi-select name="tags[]" :values="['a', 'b']"
    :options="['a' => 'Alpha', 'b' => 'Beta', 'c' => 'Gamma']"/>

Add options after load — instantly, or from your own endpoint:

// One option, client-side, no request. Optional 4th arg = category.
roro('country').addOption('Germany', 'de', 'Europe');

// A batch:
roro('country').addOptions([{ label: 'Italy', value: 'it', category: 'Europe' }]);

// Or fetch from YOUR JSON endpoint:
//   GET /api/countries?q=ge  ->  [{ "label": "Germany", "value": "de", "category": "Europe" }, ...]
roro('country').addOptionsAjax('/api/countries', { q: 'ge' });   // returns a Promise

roro('country').setOptions([...]);  // replace every option
roro('country').removeOption('fr');
roro('country').options();          // -> [{ label, value, category }, ...]
roro('country').open();  roro('country').close();

Selects emit a real roro:change event — fired only on actual user/programmatic changes, never on initial population:

roro('country').change(value => console.log('picked', value));

The legacy globals (roroAddOption, roroAddOptionsAjax, roroDisableSelect, …) still work unchanged — the roro() facade is purely additive on top of them.

<x-roro-repeatable> repeats whatever you nest inside it — one field or many, of any type, including searchable selects, multi-selects and file inputs. Users add, remove and (optionally) reorder rows; everything submits as a clean array.

<x-roro-repeatable name="contacts" label="Contacts" :min="1" :max="5">
    <x-roro-text   name="name"  label="Name" :required="true"/>
    <x-roro-email  name="email" label="Email"/>
    <x-roro-select name="type"  :options="['mobile' => 'Mobile', 'home' => 'Home']" label="Type"/>
</x-roro-repeatable>

Inner field names are relative to the row (name, email, type) — the component prefixes them automatically, so the form posts:

$request->input('contacts');
// [
//   ['name' => 'Alice', 'email' => 'alice@x.com', 'type' => 'mobile'],
//   ['name' => 'Bob',   'email' => 'bob@x.com',   'type' => 'home'],
// ]

Prefilling (edit forms) & validation

Pass an array of rows via :rows. After a failed validation, the re-submitted old() input is restored automatically — no extra wiring:

<x-roro-repeatable name="contacts" :rows="$user->contacts->toArray()">
    <x-roro-text   name="name" label="Name" :required="true"/>
    <x-roro-select name="type" :options="$types"/>
</x-roro-repeatable>

required (and any HTML constraint) on inner fields is enforced per row; the hidden blueprint is inert, so it never blocks submission.

Flat lists of scalars

For a plain list (tags[]), use the index-token (default #) where the index should go:

<x-roro-repeatable name="tags" index-token="#" :rows="['red', 'green']">
    <x-roro-text name="tags[#]" placeholder="Tag"/>
</x-roro-repeatable>
{{-- posts: tags => ['red', 'green'] --}}

Or turn indexing off entirely with :indexed="false" and keep your own names (<x-roro-text name="tags[]"/> → posts the same flat tags array).

Attributes

Selects, multi-selects and file inputs added in new rows are wired up exactly like on page load (regenerated ids, registered instances) — nothing extra to call.

A small, dependency-free facade so you can drive any field without caring about its underlying markup. Everything is chainable and type-aware — the same call works on a text input, a select, a checkbox or a file field.

roro('email')                  // -> handle, auto-detecting the field type
    .value('john@example.com') // set (chainable); roro('email').value() to read
    .required()                // toggle the HTML required flag
    .focus();

roro('age').disable();                 // works on every input type
roro('age').error('Too young');  roro('age').clearError();
roro('newsletter').value(true);        // checkbox  -> boolean
roro('satisfaction').value(80);        // range
roro('file-upload').value();           // file      -> ['a.png', ...]

value() is universal: text for inputs, the selected option for a select, an array for a multi-select, the checked state for a checkbox, the checked value for a radio group, file names for a file input.

Select-only methods (no-op elsewhere): addOption · addOptions · addOptionsAjax · setOptions · removeOption · clearOptions · options · open · close.

Repeatables from JS

roro('contacts').addRow();                                  // append empty row
roro('contacts').addRow({ name: 'Ada', type: 'home' });     // append prefilled row
roro('contacts').removeRow(0);                              // remove first row
roro('contacts').rowsCount();                               // -> 2
roro('contacts').value();                                   // -> [{name, email, type}, ...]
roro('contacts').value([{ name: 'Ada' }, { name: 'Bob' }]); // replace every row
roro('contacts').change(rows => console.log('changed', rows));

Need one specific row? Prefer a stable key over a position — add key-field="id" to the component (with an id field, often hidden, per row):

const row = roro('contacts').row(12);    // the row whose id is 12 — stable across reorder/remove
row.field('email').value('a@b.c');       // drive one field of that row
row.field('type').disable();             // works on nested selects too
row.lockRemoval();                       // disable its remove button (front-end lock)
row.disable();                           // disable every field in the row
row.value({ name: 'Ada', type: 'home' }); // set the whole row; row.value() to read it
row.moveUp();  row.moveDown();  row.remove();  row.key();  row.index();

roro('contacts').rowAt(0);                            // by position, explicitly
roro('contacts').rowWhere(r => r.email === 'a@b.c');  // by predicate (row data)
roro('contacts').rowHandles();                        // every row as a handle

const form = roro.form('signup');

form.data();                       // -> plain object of every field value
form.fill({ name: 'Ada', country: 'fr', tags: ['a', 'b'] }); // prefill (edit flows)
form.onSuccess(res => console.log('saved', res))
    .onError(xhr  => console.log('failed', xhr));
form.validate();                   // native reportValidity()
form.errors({ email: ['Already taken'] });  // show server-side errors
form.clearErrors();
form.submit();                     // honours the AJAX <x-roro-button> if present
form.disable();  form.enable();    // every field at once
form.reset();    form.overlay(true);
form.field('email').focus();       // resolve a field by name **or** id

fill() matches keys against field names first (so it maps straight onto your server payload / old() data) and falls back to element ids. It even understands repeatable groups and custom selects, not just native inputs.

Every flat roro*(id, …) global is a one-liner shortcut for the matching roro(id).method(…) call — use whichever reads better. id is the component's id (or, for forms, the form id). Below is the full list.

Entry points & introspection

Field value & state

Errors

Events

Selects

Repeatables

Row handles (roroRow(...) / roro('contacts').row(...)) expose: field(name) · fields() · value(data?) · key() · index() · remove() · lockRemoval(b?) · allowRemoval() · isRemovable() · disable(b?) · enable() · moveUp() · moveDown().

Forms

Overlay & low-level

All of the above are plain window.* globals — no import, no namespace. The chainable equivalents live on roro(id) (see the previous two sections).

RoroForm is wired into the framework, so the usual controller flow needs no front-end glue:

• Repopulation. Every field reads old() automatically after a failed validation — including nested array names and repeatable rows.
• Error display. Each field pulls its first message from session('errors') and shows it inline, with a red border on the control.
• CSRF. <x-roro-form> injects @csrf for POST/PUT/PATCH/DELETE.
• AJAX submit. <x-roro-button :ajax="true"> posts via FormData (file uploads included), shows a loading overlay, and fires events:

// Native events — the payload is on event.detail:
const form = document.getElementById('signup');
form.addEventListener('roro:ajax:success', e => { const response = e.detail; /* ... */ });
form.addEventListener('roro:ajax:error',   e => { const xhr      = e.detail; /* ... */ });

// …or the facade shortcut (payload first):
roro.form('signup')
    .onSuccess(response => { /* ... */ })
    .onError(xhr => { /* ... */ });

Add :ajax-errors="true" to the button and a 422 response's errors payload is mapped straight back onto the matching fields — no manual error handling:

// Your controller just validates as usual.
$request->validate([
    'email'            => 'required|email',
    'contacts.*.name'  => 'required',
]);

Pick a theme once in config/roroform.php:

'theme' => 'tailwind', // 'bootstrap' | 'raw'

Three themes ship complete, accessible, and component-for-component identical:

All three themes are fully dark-mode aware — every component remaps colors, borders, backgrounds and contrast in dark mode. Each is driven by a class/attribute on an ancestor (usually <html>), so you stay in control. To follow the OS setting, map it once:

if (matchMedia('(prefers-color-scheme: dark)').matches)
    document.documentElement.classList.add('dark'); // or data-bs-theme="dark"

Test it on the playground — click the Dark mode toggle to switch.

The raw theme is themed with CSS custom properties — override --roro-accent, --roro-radius, --roro-border, … to restyle it, or publish the stylesheet:

php artisan vendor:publish --tag=roro-styles   # -> public/vendor/roroform/roroform.css

Every theme is accessible: proper <label>s, aria-describedby error association, aria-invalid / aria-required, <fieldset>/<legend> radio groups, and a keyboard-navigable ARIA combobox for the custom selects. All components adapt to dark mode — no configuration needed.

Need to own the markup? Publish the Blade views and edit them in place:

php artisan vendor:publish --tag=roro-views
# -> resources/views/vendor/roroform/...

Every input forwards arbitrary HTML attributes (the Blade attribute bag) onto the underlying element — no need to declare them in PHP. Great for data-*, aria-*, autocomplete, maxlength, Alpine x- directives, etc.

<x-roro-text name="email" label="Email"
    data-testid="email" autocomplete="email" maxlength="120"/>

renders ... data-testid="email" autocomplete="email" maxlength="120"> on the <input>. Custom CSS classes go through the dedicated class attribute and are merged with the component's own roro-* classes.