Field
Displays different type of form fields.
Text
<!-- form.blade.php -->
<form class="c-form js-form-validation" autocomplete="on" id="680c360c8cad7" data-uid="680c360c8cadd" method="POST" action="#">
<!-- notice.blade.php -->
<div class="c-notice c-form__notice-failed u-margin__bottom--4 c-notice--danger" aria-hidden="true" id="680c360c8cad7-validation-error" data-uid="680c360c8cb4a" aria-labelledby="notice__text__680c360c8cad7-validation-error">
<!-- notice__ico -->
<span class="c-notice__icon">
<!-- icon.blade.php -->
<span class="c-icon c-icon--report c-icon--material c-icon--material-report material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" material-symbol="report" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="680c360c8cb8e">
</span>
</span>
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__680c360c8cad7-validation-error" for="" class="c-notice__message">
In some mysterious way, you failed to fill in the form correctly. Please try again.
</span>
</div>
<!-- notice.blade.php -->
<div class="c-notice c-form__notice-success u-margin__bottom--4 c-notice--success" aria-hidden="true" id="680c360c8cad7-validation-sucess" data-uid="680c360c8cbd2" aria-labelledby="notice__text__680c360c8cad7-validation-sucess">
<!-- notice__ico -->
<span class="c-notice__icon">
<!-- icon.blade.php -->
<span class="c-icon c-icon--check c-icon--material c-icon--material-check material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" material-symbol="check" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="680c360c8cc08">
</span>
</span>
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__680c360c8cad7-validation-sucess" for="" class="c-notice__message">
Yay! we've done it! Form is submitted!
</span>
</div>
<div class="grid">
<div class="grid-md-6">
<h2>Input field - E-mail</h2>
<!-- field.blade.php -->
<div class="c-field c-field--email c-field--md c-field--radius-md" id="680c360c8bd2c" data-uid="680c360c8bd55">
<label class="c-field__label " for="input_680c360c8bd2c" id="label_680c360c8bd2c">
Add your email
<span class="u-color__text--danger" aria-hidden="true">*</span>
</label>
<div class="c-field__inner c-field__inner--email">
<input id="input_680c360c8bd2c" value="" onkeydown="return event.keyCode !== 107" data-validation-message="Please enter a valid email" aria-labelledby="label_680c360c8bd2c" placeholder="email@email.com" type="email" name="email" required="required" data-js-required="" data-required="1" aria-required="true" autocomplete="email">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c360c8be7b">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c360c8bed5">
</span>
</div>
<div class="c-field__error" aria-hidden="true" aria-label="{{VALIDATION_ERROR_MESSAGE}}">
<!-- typography.blade.php original: span -->
<span class="c-typography c-field__error-message c-typography__variant--meta" data-uid="680c360c8bf36">
{{VALIDATION_ERROR_MESSAGE}}
</span> </div>
</div>
</div>
<div class="grid-md-6">
<h2>Input field - Date Picker</h2>
<!-- field.blade.php -->
<div class="c-field c-field--date c-field--md c-field--radius-md" id="680c360c8bf98" data-uid="680c360c8bfdb">
<label class="c-field__label " for="input_680c360c8bf98" id="label_680c360c8bf98">
Enter a date
<span class="u-color__text--danger" aria-hidden="true">*</span>
</label>
<div class="c-field__inner c-field__inner--date">
<input id="input_680c360c8bf98" value="" data-validation-message="You need to add a valid date!" aria-labelledby="label_680c360c8bf98" min="1997-06-29" max="2025-04-27" type="date" name="text" required="required" data-js-required="" data-required="1" aria-required="true" autocomplete="on">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c360c8c01f">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c360c8c064">
</span>
</div>
<div class="c-field__error" aria-hidden="true" aria-label="{{VALIDATION_ERROR_MESSAGE}}">
<!-- typography.blade.php original: span -->
<span class="c-typography c-field__error-message c-typography__variant--meta" data-uid="680c360c8c0a8">
{{VALIDATION_ERROR_MESSAGE}}
</span> </div>
</div>
</div>
<div class="grid-md-6">
<h2>Input field - Number</h2>
<!-- field.blade.php -->
<div class="c-field c-field--number c-field--md c-field--radius-md" id="680c360c8c0fe" data-uid="680c360c8c111">
<label class="c-field__label " for="input_680c360c8c0fe" id="label_680c360c8c0fe">
Number
<span class="u-color__text--danger" aria-hidden="true">*</span>
</label>
<div class="c-field__inner c-field__inner--number">
<input id="input_680c360c8c0fe" value="" onkeydown="return event.keyCode !== 69" data-validation-message="Must be a number." aria-labelledby="label_680c360c8c0fe" type="number" name="number" required="required" data-js-required="" data-required="1" aria-required="true" autocomplete="on">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c360c8c14d">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c360c8c18c">
</span>
</div>
<div class="c-field__error" aria-hidden="true" aria-label="{{VALIDATION_ERROR_MESSAGE}}">
<!-- typography.blade.php original: span -->
<span class="c-typography c-field__error-message c-typography__variant--meta" data-uid="680c360c8c1c4">
{{VALIDATION_ERROR_MESSAGE}}
</span> </div>
</div>
</div>
<div class="grid-md-6">
<h2>Input field - Password</h2>
<!-- field.blade.php -->
<div class="c-field c-field--password c-field--md c-field--radius-md" id="680c360c8c214" data-uid="680c360c8c226">
<label class="c-field__label " for="input_680c360c8c214" id="label_680c360c8c214">
Set your password
<span class="u-color__text--danger" aria-hidden="true">*</span>
</label>
<div class="c-field__inner c-field__inner--password">
<input id="input_680c360c8c214" value="" data-validation-message="You need to fill in this field." aria-labelledby="label_680c360c8c214" placeholder="correct horse battery staple" type="password" name="password" required="required" data-js-required="" data-required="1" aria-required="true" autocomplete="new-password">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c360c8c261">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c360c8c29f">
</span>
</div>
<div class="c-field__error" aria-hidden="true" aria-label="{{VALIDATION_ERROR_MESSAGE}}">
<!-- typography.blade.php original: span -->
<span class="c-typography c-field__error-message c-typography__variant--meta" data-uid="680c360c8c2d6">
{{VALIDATION_ERROR_MESSAGE}}
</span> </div>
<small class="c-field__helper">
Hey! Want some help with this?
</small>
</div>
</div>
<div class="grid-md-6">
<h2>Input field - Search (with icon)</h2>
<!-- field.blade.php -->
<div class="c-field c-field--search c-field--icon c-field--md c-field--radius-md" id="680c360c8c327" data-uid="680c360c8c33a">
<label class="c-field__label " for="input_680c360c8c327" id="label_680c360c8c327">
Search
<span class="u-color__text--danger" aria-hidden="true">*</span>
</label>
<div class="c-field__inner c-field__inner--search">
<!-- icon.blade.php -->
<span class="c-icon c-field__icon c-icon--search c-icon--material c-icon--material-search material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" material-symbol="search" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" aria-hidden="false" data-uid="680c360c8c376">
</span>
<input id="input_680c360c8c327" value="" aria-labelledby="label_680c360c8c327" type="search" name="search" required="required" data-js-required="" data-required="1" aria-required="true" autocomplete="on">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c360c8c3b5">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c360c8c3f0">
</span>
</div>
</div>
</div>
<div class="grid-md-6">
<h2>Input field - Text</h2>
<!-- field.blade.php -->
<div class="c-field c-field--text c-field--md c-field--radius-md" id="680c360c8c445" data-uid="680c360c8c453">
<label class="c-field__label " for="input_680c360c8c445" id="label_680c360c8c445">
Normal text field
</label>
<div class="c-field__inner c-field__inner--text">
<input id="input_680c360c8c445" value="" aria-labelledby="label_680c360c8c445" type="text" name="text" autocomplete="on">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c360c8c49e">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c360c8c4da">
</span>
</div>
</div>
</div>
<div class="grid-md-6">
<h2>Input field - Validated: invalid</h2>
<!-- field.blade.php -->
<div class="c-field is-invalid c-field--email c-field--md c-field--radius-md" id="680c360c8c532" data-uid="680c360c8c545">
<label class="c-field__label " for="input_680c360c8c532" id="label_680c360c8c532">
Add your e-mail
<span class="u-color__text--danger" aria-hidden="true">*</span>
</label>
<div class="c-field__inner c-field__inner--email">
<input id="input_680c360c8c532" value="" onkeydown="return event.keyCode !== 107" data-validation-message="Please enter a valid email" aria-labelledby="label_680c360c8c532" placeholder="email@email.com" type="email" name="email" required="required" data-js-required="" data-required="1" aria-required="true" autocomplete="email">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c360c8c57e">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c360c8c5b9">
</span>
</div>
<div class="c-field__error" aria-hidden="true" aria-label="{{VALIDATION_ERROR_MESSAGE}}">
<!-- typography.blade.php original: span -->
<span class="c-typography c-field__error-message c-typography__variant--meta" data-uid="680c360c8c5f0">
{{VALIDATION_ERROR_MESSAGE}}
</span> </div>
</div>
</div>
<div class="grid-md-6">
<h2>Input field - Validated: valid</h2>
<!-- field.blade.php -->
<div class="c-field is-valid c-field--email c-field--md c-field--radius-md" id="680c360c8c641" data-uid="680c360c8c654">
<label class="c-field__label " for="input_680c360c8c641" id="label_680c360c8c641">
Add your email
<span class="u-color__text--danger" aria-hidden="true">*</span>
</label>
<div class="c-field__inner c-field__inner--email">
<input id="input_680c360c8c641" value="" onkeydown="return event.keyCode !== 107" data-validation-message="Please enter a valid email" aria-labelledby="label_680c360c8c641" placeholder="email@email.com" type="email" name="email" required="required" data-js-required="" data-required="1" aria-required="true" autocomplete="email">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c360c8c68d">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c360c8c6c8">
</span>
</div>
<div class="c-field__error" aria-hidden="true" aria-label="{{VALIDATION_ERROR_MESSAGE}}">
<!-- typography.blade.php original: span -->
<span class="c-typography c-field__error-message c-typography__variant--meta" data-uid="680c360c8c6fd">
{{VALIDATION_ERROR_MESSAGE}}
</span> </div>
</div>
</div>
<div class="grid-md-6">
<h2>Input field - Hidden label</h2>
<!-- field.blade.php -->
<div class="c-field c-field--email c-field--md c-field--radius-md" id="680c360c8c771" data-uid="680c360c8c783">
<label class="c-field__label u-sr__only" for="input_680c360c8c771" id="label_680c360c8c771">
Add your email
<span class="u-color__text--danger" aria-hidden="true">*</span>
</label>
<div class="c-field__inner c-field__inner--email">
<input id="input_680c360c8c771" value="" onkeydown="return event.keyCode !== 107" data-validation-message="Please enter a valid email" aria-label="Add your email" placeholder="email@email.com" type="email" name="email" required="required" data-js-required="" data-required="1" aria-required="true" autocomplete="email">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c360c8c7bd">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c360c8c7f8">
</span>
</div>
<div class="c-field__error" aria-hidden="true" aria-label="{{VALIDATION_ERROR_MESSAGE}}">
<!-- typography.blade.php original: span -->
<span class="c-typography c-field__error-message c-typography__variant--meta" data-uid="680c360c8c82d">
{{VALIDATION_ERROR_MESSAGE}}
</span> </div>
</div>
</div>
<div class="grid-md-6">
<h2>Input field - Custom validation (email)</h2>
<!-- field.blade.php -->
<div class="c-field c-field--text c-field--md c-field--radius-md" id="680c360c8c885" data-uid="680c360c8c898">
<label class="c-field__label u-sr__only" for="input_680c360c8c885" id="label_680c360c8c885">
Add your email
<span class="u-color__text--danger" aria-hidden="true">*</span>
</label>
<div class="c-field__inner c-field__inner--text">
<input id="input_680c360c8c885" value="" data-validation-regexp="^[^@]+@[^@]+\.[^@]+$" data-validation-message="Please enter a valid email" aria-label="Add your email" placeholder="email@email.com" type="text" name="email_regexp" required="required" data-js-required="" data-required="1" aria-required="true" autocomplete="email">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c360c8c8e4">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c360c8c924">
</span>
</div>
<div class="c-field__error" aria-hidden="true" aria-label="{{VALIDATION_ERROR_MESSAGE}}">
<!-- typography.blade.php original: span -->
<span class="c-typography c-field__error-message c-typography__variant--meta" data-uid="680c360c8c95d">
{{VALIDATION_ERROR_MESSAGE}}
</span> </div>
</div>
</div>
<div class="grid-md-6">
<h2>Input field - Custom validation (email) & Shadow active</h2>
<!-- field.blade.php -->
<div class="c-field c-field--text c-field--md c-field--shadow c-field--radius-md" id="680c360c8c9b5" data-uid="680c360c8c9c9">
<label class="c-field__label u-sr__only" for="input_680c360c8c9b5" id="label_680c360c8c9b5">
Add your email
<span class="u-color__text--danger" aria-hidden="true">*</span>
</label>
<div class="c-field__inner c-field__inner--text">
<input id="input_680c360c8c9b5" value="" data-validation-regexp="^[^@]+@[^@]+\.[^@]+$" data-validation-message="Please enter a valid email" aria-label="Add your email" placeholder="email@email.com" type="text" name="email_regexp" required="required" data-js-required="" data-required="1" aria-required="true" autocomplete="email">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c360c8ca07">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c360c8ca46">
</span>
</div>
<div class="c-field__error" aria-hidden="true" aria-label="{{VALIDATION_ERROR_MESSAGE}}">
<!-- typography.blade.php original: span -->
<span class="c-typography c-field__error-message c-typography__variant--meta" data-uid="680c360c8ca7f">
{{VALIDATION_ERROR_MESSAGE}}
</span> </div>
</div>
</div>
<div class="grid-md-12">
<input type="submit">
</div>
</div>
</form>@form([
'errorMessage' => 'In some mysterious way, you failed to fill in the form correctly. Please try again.',
'validateMessage' => "Yay! we've done it! Form is submitted!",
'attributeList' => [
'autocomplete' => 'on'
]
])
<div class="grid">
<div class="grid-md-6">
@markdown
##Input field - E-mail
@endmarkdown
@field([
'type' => 'email',
'placeholder' => 'email@email.com',
'name' => 'email',
'autocomplete' => 'email',
'invalidMessage' => 'Please enter a valid email',
'label' => "Add your email",
'required' => true,
])
@endfield
</div>
<div class="grid-md-6">
@markdown
##Input field - Date Picker
@endmarkdown
@field([
'type' => 'date',
'name' => 'text',
'value' => '',
'label' => 'Enter a date',
'required' => true,
'invalidMessage' => 'You need to add a valid date!',
'datepicker' => [
'minDate' => "6/29/1997",
'maxDate' => "tomorrow",
]
])
@endfield
</div>
<div class="grid-md-6">
@markdown
##Input field - Number
@endmarkdown
@field([
'type' => 'number',
'name' => 'number',
'required' => true,
'label' => "Number",
'invalidMessage' => 'Must be a number.',
])
@endfield
</div>
<div class="grid-md-6">
@markdown
##Input field - Password
@endmarkdown
@field([
'type' => 'password',
'name' => 'password',
'placeholder' => 'correct horse battery staple',
'required' => true,
'autocomplete' => "new-password",
'invalidMessage' => 'You need to fill in this field.',
'label' => "Set your password",
'helperText' => "Hey! Want some help with this?"
])
@endfield
</div>
<div class="grid-md-6">
@markdown
##Input field - Search (with icon)
@endmarkdown
@field([
'type' => 'search',
'name' => 'search',
'required' => true,
'label' => "Search",
'icon' => ['icon' => 'search']
])
@endfield
</div>
<div class="grid-md-6">
@markdown
##Input field - Text
@endmarkdown
@field([
'type' => 'text',
'name' => 'text',
'label' => "Normal text field"
])
@endfield
</div>
<div class="grid-md-6">
@markdown
##Input field - Validated: invalid
@endmarkdown
@field([
'type' => 'email',
'placeholder' => 'email@email.com',
'name' => 'email',
'autocomplete' => 'email',
'invalidMessage' => 'Please enter a valid email',
'label' => "Add your e-mail",
'required' => true,
'classList' => [
'is-invalid'
]
])
@endfield
</div>
<div class="grid-md-6">
@markdown
##Input field - Validated: valid
@endmarkdown
@field([
'type' => 'email',
'placeholder' => 'email@email.com',
'name' => 'email',
'autocomplete' => 'email',
'invalidMessage' => 'Please enter a valid email',
'label' => "Add your email",
'required' => true,
'classList' => [
'is-valid'
]
])
@endfield
</div>
<div class="grid-md-6">
@markdown
##Input field - Hidden label
@endmarkdown
@field([
'type' => 'email',
'placeholder' => 'email@email.com',
'name' => 'email',
'autocomplete' => 'email',
'invalidMessage' => 'Please enter a valid email',
'label' => "Add your email",
'required' => true,
'hideLabel' => true,
])
@endfield
</div>
<div class="grid-md-6">
@markdown
##Input field - Custom validation (email)
@endmarkdown
@field([
'type' => 'text',
'placeholder' => 'email@email.com',
'name' => 'email_regexp',
'autocomplete' => 'email',
'validationRegexp' => '^[^@]+@[^@]+\.[^@]+$',
'invalidMessage' => 'Please enter a valid email',
'label' => "Add your email",
'required' => true,
'hideLabel' => true,
])
@endfield
</div>
<div class="grid-md-6">
@markdown
##Input field - Custom validation (email) & Shadow active
@endmarkdown
@field([
'type' => 'text',
'placeholder' => 'email@email.com',
'name' => 'email_regexp',
'autocomplete' => 'email',
'validationRegexp' => '^[^@]+@[^@]+\.[^@]+$',
'invalidMessage' => 'Please enter a valid email',
'label' => "Add your email",
'required' => true,
'hideLabel' => true,
'shadow' => true
])
@endfield
</div>
<div class="grid-md-12">
<input type="submit">
</div>
</div>
@endformRange
<!-- field.blade.php -->
<div class="c-field c-field--range c-field--md c-field--radius-md" id="680c360c8ccb1" data-uid="680c360c8ccc1">
<div class="c-field__inner c-field__inner--range">
<input id="input_680c360c8ccb1" value="" aria-label="" type="range" name="rangeSlider" autocomplete="on">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c360c8ccfc">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c360c8cd3a">
</span>
</div>
</div>@field(
[
'type' => 'range',
'name' => 'rangeSlider',
])
@endfieldColor
<!-- field.blade.php -->
<div class="c-field c-field--color c-field--md c-field--radius-md" id="680c360c8cda4" data-uid="680c360c8cdb3">
<div class="c-field__inner c-field__inner--color">
<input id="input_680c360c8cda4" value="" aria-label="" type="color" name="colorPicker" autocomplete="on">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c360c8cdeb">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="680c360c8ce26">
</span>
</div>
</div>@field(
[
'type' => 'color',
'name' => 'colorPicker',
])
@endfieldBlade component parameters
| Key | Default value | Type | Available values | Description |
| label | string | - | Label for the field. | |
| name | string | - | The name of the field (html name='') | |
| type | text | string | - | text, checkbox and radio |
| validationRegexp | false | boolean | - | Regular expression for validation. Will apply on non empty strings or all strings when required. |
| invalidMessage | false | boolean | - | Message to display when the field is invalid. |
| required | false | boolean | - | Require this field to be filled in. |
| autocomplete | on | string | - | Browser automatically completes the input values based on values that the user has entered before. Reference: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-autocomplete |
| value | string | - | Field value | |
| icon | string | - | Adds a icon before the input field (string) | |
| size | md | string | - | - |
| radius | md | string | - | If any special type of rounded corners should be used (none, xs, sm, md, lg) |
| placeholder | string | - | Example value for field | |
| hideLabel | false | boolean | - | This will remove the visible label. Label will be auditible for screen readers. |
| helperText | string | - | Text displayed below the field. | |
| multiline | false | boolean | - | Render textarea instead of input. Boolean or number of rows to render. |
| borderless | false | boolean | - | Removes the border around the input field |
| shadow | false | boolean | - | If the current theme applies shadows to element, append shadow here too. |
| fieldAttributeList | [] | array | - | Attributes for field element. Valid input attributes are casted to here from attributesList. |
| description | string | - | - | |
| id | string | - | The DOM id of the component. | |
| classList | [] | array | - | Array containing wrapping classes array |
| attributeList | [] | array | - | Array containing keys and values rendered as attributes |
| containerAware | false | boolean | true/false | Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component. |