Form Input Bindings

Text

You can use model="$myValue" directive to create two-way data binding on form inputs. For example:

class EventHandling extends BaseComponent
{
    public string $name = '';
...
<input model="$name" placeholder="Enter your name" />
<div>Your name is: $name</div>

The result:

Your name is:

Multiline Text

For textarea everything is the same. For example:

class EventHandling extends BaseComponent
{
    public string $message = '';
...
<textarea model="$message" placeholder="Enter your message"></textarea>
<div>Your message is:</div>
<p style="white-space: pre-line;">$message</p>

The result:

Your message is:

Please note: interpolation <textarea>$message</textarea> will not work.

Checkbox

Same here, use two-way data binding directive for checkbox type. For example:

class EventHandling extends BaseComponent
{
    public bool $checked = false;
...
<label>
    <input type="checkbox" model="$checked" /> Visible
</label>
<div if="$checked">I'm visible!</div>

The result:

Visible

Multiple checkboxes with array value binding:

class EventHandling extends BaseComponent
{
    public array $checkedNames = [];
    function getNames()
    {
        return json_encode($this->checkedNames);
    }
...
<input type="checkbox" id="jack" value="Jack" model="$checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" model="$checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" model="$checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {getNames()}</span>

The result:

Jack John Mike
Checked names: []

Radio

Same here, use two-way data binding directive for radio type. For example:

class EventHandling extends BaseComponent
{
    public string $picked = '';
...
<input type="radio" id="one" value="One" model="$picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" model="$picked">
<label for="two">Two</label>
<br>
<span>Picked: $picked</span>

The result:

One
Two
Picked:

Select

The same as well, for example:

class EventHandling extends BaseComponent
{
    public string $selected = '';
...
<select model="$selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
<span>Selected: $selected</span>

The result:

Selected:

Multiple select, array binding:

class EventHandling extends BaseComponent
{
    public array $selectedList = [];
...
<select model="$selectedList" multiple>
    <option>A</option>
    <option>B</option>
    <option>C</option>
</select>
<br>
<span>Selected: {json_encode($selectedList)}</span>

The result:

Selected: []