Text Input

A Text Input component is a UI element within a form or interface that allows users to enter and edit text data, such as names, emails, or search queries.

Usage

<TextInput label="First Name" type="text" model="$firstName" />
<TextInput label="Last Name" type="text" model="$lastName" />
<div>
    You have entered: {$firstName} {$lastName}
</div>

<?php

class FormsExample extends BaseComponent
{
    public string $firstName = '';
    public string $lastName = '';
}

Text Area

To make your input a textarea, set textarea property:

<TextInput label="Summary" textarea model="$summary" />

Add rows and cols if necessary:

<TextInput label="Summary" textarea cols="6" rows="6" model="$summary" />

Placeholder and Hint

You can add a placeholder for your input with placeholder property.

And hint with hint property:

<TextInput 
    label="First Name" 
    type="text"
    placeholder="Enter your first name"
    hint="Example: Mike, Josh, etc."
    model="$firstName" 
/>

Slot

If you need to extend the content of the input, you can use the slot feature:

<TextInput label="Email" type="text" model="$email">
    <div class="form-text">
        Forgot your password?
        <a href="/reset-password" class="text-secondary">Reset it here</a>
    </div>
</TextInput>

Input Class

Use inputClass to set up additional class list for the input tag:

<TextInput label="Email" type="text" inputClass="bg-primary-subtle" model="$email" />

Wrapper Class

Use wrapperClass to set up additional class list for the wrapper:

<TextInput label="First Name" type="text" wrapperClass="mb-3" model="$firstName" />
<TextInput label="Last Name" type="text" wrapperClass="mb-3" model="$lastName" />

Inset

Use inset property to remove the bottom margin from the wrapper:

<TextInput label="First Name" type="text" inset model="$firstName" />
<TextInput label="Last Name" type="text" inset model="$lastName" />

Readonly

Use readonly to show a value that the user can see and select, but not change:

<TextInput label="Account ID" readonly model="$accountId" hint="The account ID can not be changed." />

Clearable

Use clearable to show a clear button next to the input. Clicking it sets the model to null and emits the (clear) event:

<TextInput label="City" clearable model="$city" />
<div>
    You have entered: {$city}
</div>

<?php

class FormsExample extends BaseComponent
{
    public ?string $city = 'Lisbon';
}

Since the model becomes null after clearing, declare the bound property as nullable (?string).

To react to the clear button, handle the (clear) event:

<TextInput label="City" clearable model="$city" (clear)="onCityCleared" />

Revealable

Use revealable on a password input to add an eye button. Clicking it switches the input between hidden and plain text:

<TextInput label="Password" type="password" revealable model="$password" />

Copyable

Use copyable to add a button that copies the current value to the clipboard. The icon changes to a check mark for 1.5 seconds after the copy succeeds.

You can combine it with readonly and revealable, for example to show a secret that the user needs to view and share:

<TextInput label="API key" type="password" readonly revealable copyable model="$apiKey" />

The copy button uses the browser Clipboard API. It needs a secure context (HTTPS or localhost). If you need a fallback for other contexts, or a standalone button, use Copy Button.

Properties

model - two-way data binding.

type - (optional), type of the input.

type options: color, date, datetime-local, email, month, number, password, tel, text, time, url, week. Default: null, means text. With type="number", an empty input sets the model to null.

placeholder - (optional), placeholder of the input.

label - (optional), label text for the input.

hint - (optional), hint text for the input.

autocomplete - (optional), autocomplete attribute for the input.

inputClass - (optional), class attribute for the input.

wrapperClass - (optional), class attribute for the wrapper container.

id - (optional), id attribute of the input.

name - (optional), name attribute of the input.

textarea - (optional), will use textarea instead of input.

rows - (optional), rows attribute for textarea.

cols - (optional), cols attribute for textarea.

readonly - (optional), boolean, makes the input read only. Default: false.

clearable - (optional), boolean, shows a clear button that sets the model to null. Default: false.

revealable - (optional), boolean, shows a button that toggles a password input between hidden and plain text. Default: false.

copyable - (optional), boolean, shows a button that copies the current value to the clipboard. Default: false.

inset - (optional), boolean, removes the bottom margin (mb-3) from the wrapper. Default: false.

isInvalid - (optional), boolean, marks the input as invalid, adds error highlight.

Events

(input) - event that happens when the element gets user input. Receives the new value. Also fires with null when the clear button is clicked.

(clear) - event that happens when the user clicks the clear button (clearable).

Slots

default - (optional), default slot, renders after the hint container.