TextBox

Single-line text input with validation, character counting, presets for email and password fields, and JS event hooks.

Basic Inputs

Email (HTML5 type):

Password:

Character Count

Username (max 20 chars):

0/20

Type to see output...

// Email preset
<?= $m->textbox('email')
    ->email()
    ->placeholder('you@example.com')
    ->required(true) ?>

// Password preset
<?= $m->textbox('password')
    ->password('new-password')
    ->placeholder('Min 8 characters')
    ->minLength(8) ?>

// With character count
<?= $m->textbox('username')
    ->placeholder('Enter username')
    ->characterCount(20)
    ->name('username') ?>

// Pattern validation
<?= $m->textbox('code')
    ->pattern('[A-Z]{3}-[0-9]{4}')
    ->placeholder('ABC-1234') ?>

// Initialise with event hooks
m.textbox('email', {
    onInput: function(data) {
        console.log(data.value);
    },
    onChange: function(data) {
        console.log('Final:', data.value);
    }
});

// Programmatic API
var tb = m.textbox('email');
tb.getValue();
tb.setValue('new@example.com');
tb.clear();
tb.focus();
tb.enable();
tb.disable();

// Validation
tb.validate();      // check HTML5 rules
tb.setError('Invalid email');
tb.clearError();

PHP PHP Methods (Fluent)

Method / Property	Parameters	Description
`$m->textbox($id)`	`string`	Create a text input component.
`->value($value)`	`?string`	Set the initial value.
`->placeholder($text)`	`string`	Set placeholder text.
`->name($name)`	`string`	Form field name.
`->required($req)`	`bool`	Mark as required (default: `true`).
`->minLength($len)`	`int`	Minimum character length.
`->maxLength($len)`	`int`	Maximum character length.
`->disabled($dis)`	`bool`	Disable the input.
`->type($type)`	`string`	HTML input type (`text`, `email`, `password`, etc.).
`->email()`		Preset for email: sets type, autocomplete, inputmode.
`->password($autocomplete)`	`string`	Preset for password field. Default: `"current-password"`.
`->autocomplete($value)`	`string`	Set the `autocomplete` attribute.
`->pattern($pattern)`	`string`	Regex validation pattern.
`->characterCount($max)`	`int`	Show a live `X/max` character counter.

JS JS Methods

Method / Property	Parameters	Description
`m.textbox(id, options)`	`string, ?object`	Initialise or get a textbox instance.
`getValue()`		Get the current input value.
`setValue(value)`	`string`	Set the value and fire a `change` event.
`clear()`		Clear the input value.
`focus()`		Focus the input element.
`enable()`		Remove the disabled state.
`disable()`		Add the disabled state.
`validate()`		Run HTML5 `checkValidity()`.
`setError(message)`	`string`	Show an error message below the input.
`clearError()`		Clear any error state.

JS JS Options

Method / Property	Parameters	Description
`onChange`	`function\|string`	Callback fired on the `change` event. Receives `{value}`.
`onInput`	`function\|string`	Callback fired on every `input` event. Receives `{value}`.
`onFocus`	`function\|string`	Callback fired on `focus`.
`onBlur`	`function\|string`	Callback fired on `blur`.
`validateOnBlur`	`boolean`	Auto-validate on blur (default: `true`).