Form

Bootstrap forms with client-side validation (Parsley.js), input masks (Inputmask), server-side errors and old input. Submit the demo empty to see the error summary.

LookBootstrapMaterialTailwindOpen the demo in a new tab (Form)

Form demo. Data is embedded and nothing is saved.

<?php

use Celerik\Ui\Components\Form;
use Celerik\Ui\Components\Form\Field;

return Form::make('signup')
    ->action('/signup')
    ->errorSummary()
    ->add(
        Field::text('name')->required()->maxLength(80),
        Field::email('email', 'E-mail')->required()->help('We never share your e-mail.'),
        Field::tel('phone')->mask('(999) 999-9999')->help('Optional.'),
        Field::password('password')->required()->minLength(8),
        Field::select('country', ['fr' => 'France', 'ca' => 'Canada', 'cd' => 'DR Congo'])->placeholder('Choose...'),
        Field::checkbox('terms', 'I accept the terms')->required(),
    )
    ->submit('Create account');

The form

Method	Use
action($url), method('POST')	PUT, PATCH and DELETE are sent as POST with a _method field (the Laravel and Symfony convention).
csrf($token, $field = '_token')	A hidden CSRF field.
add(Field ...$fields)	The fields, in order.
errors([...])	Server-side errors: field => message or field => [messages]; address.city matches address[city].
values($_POST)	Old input after a failed submit (passwords are never refilled).
errorSummary($enabled = true, $title = 'There is a problem')	Lists every error at the top with a link to each field, and moves focus to it after a failed submit.
floatingLabels()	Bootstrap floating labels (the Material look).
submit($label)	The submit button's label; null renders none (e.g. a form whose button is in a modal footer).

Client-side validation is a convenience: always validate again on the server and pass the messages to errors().

Fields

Field::text('name')->required()->maxLength(80);
Field::email('email', 'E-mail')->required()->help('We never share your e-mail.');
Field::password('password_confirmation', 'Confirm password')->required()->equalTo('password');
Field::tel('phone')->mask('(999) 999-9999');
Field::number('age')->min(18)->max(120);
Field::select('country', ['fr' => 'France', 'ca' => 'Canada'])->placeholder('Choose...');
Field::checkbox('terms', 'I accept the terms')->required();
Field::textarea('message')->minLength(10);
Field::date('birthday');
Field::hidden('id', 42);

Rich text and files have their own pages: Rich text editor and File upload.

Rule or option	Use
required(), minLength(), maxLength(), min(), max()	HTML5 rules, also checked by Parsley.
pattern('[A-Z]{2}[0-9]{4}')	A regular expression, anchored, without delimiters.
equalTo('password')	Same value as another field.
mask('99/99/9999')	An input mask.
message('...')	A custom error message for every rule of the field.
placeholder(), help(), value(), attribute($name, $value)	Placeholder, help text, value, any attribute.

Accessibility

• Every field has a label; help and error texts are linked with aria-describedby, and invalid fields get aria-invalid.
• A failed submit focuses the first invalid field, or the error summary, which is announced once instead of one message per field.
• Required fields are marked with an asterisk hidden from screen readers, plus required.