Laravel Inertia Forms

Appearance

Fields

Text Input ​

Erag\InertiaForms\Fields\TextInput renders a single-line <input>. It covers text, email, password, number, URL, phone, and search inputs.

When to use: names, emails, passwords, amounts, short answers.

php
use Erag\InertiaForms\Fields\TextInput;

TextInput::make('name')->required()->maxLength(100);
TextInput::make('email')->email()->required();
TextInput::make('price')->number()->min(0)->step(0.01)->prefix('$');

Examples ​

Each example is a live form built from the PHP below it. Fill it in and press submit to see the data your controller would receive.

Basic ​

A required name with a length limit, and an email input that also adds the email rule.

php
use Erag\InertiaForms\Fields\TextInput;

[
    TextInput::make('name')->required()->maxLength(100),
    TextInput::make('email')->email()->required(),
];

Types, prefix and suffix ​

number() with step() for decimals, prefix() / suffix() for units and fixed URL parts, a password() with its own autocomplete, and a search() input with a clearable() × button. The prefix and suffix are not part of the submitted value.

php
use Erag\InertiaForms\Fields\TextInput;

[
    TextInput::make('price')->number()->min(0)->step(0.01)->prefix('$'),
    TextInput::make('weight')->number()->min(0)->suffix('kg'),
    TextInput::make('subdomain')->prefix('https://')->suffix('.example.test'),
    TextInput::make('password')->password()->autocomplete('new-password')->minLength(8),
    TextInput::make('keyword')->search()->placeholder('Search products…')->clearable(),
];

Advanced: contact details ​

A two-column block with autocomplete hints for the browser, a tel() field that opens the number pad on phones, and a budget limited with min() / max().

php
use Erag\InertiaForms\Fields\Fieldset;
use Erag\InertiaForms\Fields\TextInput;

Fieldset::make('Contact details')
    ->columns(2)
    ->fields([
        TextInput::make('name')->required()->maxLength(100)->autocomplete('name'),
        TextInput::make('company')->autocomplete('organization'),
        TextInput::make('email')->email()->required()->autocomplete('email'),
        TextInput::make('phone')->tel()->autocomplete('tel')->placeholder('+91 98765 43210'),
        TextInput::make('website')->url()->placeholder('https://example.test')->columnSpan(2),
        TextInput::make('budget')
            ->number()
            ->min(500)
            ->max(100000)
            ->step(100)
            ->prefix('$')
            ->suffix('USD')
            ->help('Between 500 and 100,000.')
            ->columnSpan(2),
    ]);

Methods ​

All common field methods are available, plus:

type(string $type) ​

Set the HTML input type directly. The default is text.

php
TextInput::make('code')->type('text');

email() ​

Shortcut for type('email'). Adds the email validation rule.

php
TextInput::make('email')->email();

password() ​

Shortcut for type('password'). Sets autocomplete="current-password" unless you set your own.

php
TextInput::make('password')->password()->autocomplete('new-password');

number() ​

Shortcut for type('number'). Switches validation to numeric and uses min()/max() instead of minLength()/maxLength().

php
TextInput::make('quantity')->number()->min(1)->max(99);

url() ​

Shortcut for type('url'). Adds the url validation rule.

php
TextInput::make('website')->url()->prefix('https://');

tel() ​

Shortcut for type('tel'). Mobile keyboards show a number pad.

php
TextInput::make('phone')->tel();

Shortcut for type('search').

php
TextInput::make('keyword')->search();

minLength(?int $length) / maxLength(?int $length) ​

Minimum and maximum number of characters. Sets the HTML attributes and adds min:/max: rules (for non-number types).

php
TextInput::make('username')->minLength(3)->maxLength(20);

min(int|float|null $value) / max(int|float|null $value) ​

Smallest and largest allowed number. Sets the HTML attributes and adds min:/max: rules (for number() only).

php
TextInput::make('age')->number()->min(18)->max(120);

step(int|float|string|null $step) ​

The HTML step attribute, for example 0.01 for prices or 'any'. It is not validated on the server.

php
TextInput::make('price')->number()->step(0.01);

prefix(?string $prefix) / suffix(?string $suffix) ​

Text shown inside the input box before or after the value. The text is only visual and is not part of the value.

php
TextInput::make('domain')->prefix('https://')->suffix('.example.com');
TextInput::make('budget')->number()->suffix('USD');

autocomplete(?string $autocomplete) ​

The HTML autocomplete attribute.

php
TextInput::make('email')->email()->autocomplete('email');

clearable(bool $clearable = true) ​

Show a × button at the end of the input while it has text. Clicking it empties the value. The button is hidden when the field is disabled or read-only, and it works together with prefix() / suffix().

php
TextInput::make('keyword')->search()->clearable();

Validation rules ​

ConfigurationRules
default / tel() / password() / search() / custom typestring
email()string, email
url()string, url
minLength(3) / maxLength(20)adds min:3 / max:20
number()numeric
number()->min(0)->max(10)numeric, min:0, max:10

Every rule list starts with required or nullable. Example:

php
TextInput::make('name')->required()->maxLength(50);
// ['required', 'string', 'max:50']

Value ​

  • Stores a string. Number inputs also send the typed text as a string; the numeric rule accepts it.
  • Empty value: ''.

Standalone use ​

vue
<script setup lang="ts">
import { ref } from 'vue';
import { TextInput, type FieldSchema } from '@erag/inertia-forms-vue';

defineProps<{ searchField: FieldSchema }>();
const query = ref('');
</script>

<template>
    <TextInput v-model="query" :field="searchField" id="search" :disabled="false" />
</template>
tsx
import { useState } from 'react';
import { TextInput, type FieldSchema } from '@erag/inertia-forms-react';

export function Search({ searchField }: { searchField: FieldSchema }) {
    const [query, setQuery] = useState('');

    return <TextInput field={searchField} id="search" value={query} disabled={false} onChange={(value) => setQuery(String(value))} />;
}
svelte
<script lang="ts">
    import { TextInput, type FieldSchema } from '@erag/inertia-forms-svelte';

    let { searchField }: { searchField: FieldSchema } = $props();
    let query = $state('');
</script>

<TextInput field={searchField} id="search" bind:value={query} disabled={false} />

Here searchField is a serialized field passed from Laravel, for example 'searchField' => TextInput::make('q')->search()->placeholder('Search…'). See Standalone Components.