Field
Displays different type of form fields.
Text
<!-- form.blade.php -->
<form class="c-form js-form-validation" autocomplete="on" id="662cfb7295ba7" data-uid="662cfb7295bad" 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="662cfb7295ba7-validation-error" data-uid="662cfb7295c19" aria-labelledby="notice__text__662cfb7295ba7-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-outlined material-symbols-outlined--filled c-icon--size-md" material-symbol="report" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="662cfb7295c56">
</span>
</span>
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__662cfb7295ba7-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="662cfb7295ba7-validation-sucess" data-uid="662cfb7295c91" aria-labelledby="notice__text__662cfb7295ba7-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-outlined material-symbols-outlined--filled c-icon--size-md" material-symbol="check" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="662cfb7295cc3">
</span>
</span>
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__662cfb7295ba7-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="662cfb7294f5f" data-uid="662cfb7294f8a">
<label class="c-field__label " for="input_662cfb7294f5f" id="label_662cfb7294f5f">
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_662cfb7294f5f" value="" onkeydown="return event.keyCode !== 107" data-validation-message="Please enter a valid email" aria-labelledby="label_662cfb7294f5f" 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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="error_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662cfb7295014">
</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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="check_circle_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662cfb7295061">
</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="662cfb72950cd">
{{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="662cfb7295132" data-uid="662cfb729517a">
<label class="c-field__label " for="input_662cfb7295132" id="label_662cfb7295132">
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_662cfb7295132" value="" data-validation-message="You need to add a valid date!" aria-labelledby="label_662cfb7295132" min="1997-06-29" max="2024-04-28" 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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="error_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662cfb72951c1">
</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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="check_circle_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662cfb72951ff">
</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="662cfb7295241">
{{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="662cfb7295296" data-uid="662cfb72952a9">
<label class="c-field__label " for="input_662cfb7295296" id="label_662cfb7295296">
Number
<span class="u-color__text--danger" aria-hidden="true">*</span>
</label>
<div class="c-field__inner c-field__inner--number">
<input id="input_662cfb7295296" value="" onkeydown="return event.keyCode !== 69" data-validation-message="Must be a number." aria-labelledby="label_662cfb7295296" 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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="error_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662cfb72952e4">
</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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="check_circle_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662cfb729531f">
</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="662cfb7295352">
{{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="662cfb72953a1" data-uid="662cfb72953b4">
<label class="c-field__label " for="input_662cfb72953a1" id="label_662cfb72953a1">
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_662cfb72953a1" value="" data-validation-message="You need to fill in this field." aria-labelledby="label_662cfb72953a1" 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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="error_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662cfb72953ee">
</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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="check_circle_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662cfb7295426">
</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="662cfb7295459">
{{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="662cfb72954ac" data-uid="662cfb72954bf">
<label class="c-field__label " for="input_662cfb72954ac" id="label_662cfb72954ac">
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-outlined material-symbols-outlined--filled c-icon--size-md" material-symbol="search" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" aria-hidden="true" data-uid="662cfb72954f7">
</span>
<input id="input_662cfb72954ac" value="" aria-labelledby="label_662cfb72954ac" 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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="error_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662cfb7295530">
</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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="check_circle_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662cfb7295566">
</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="662cfb72955b4" data-uid="662cfb72955c3">
<label class="c-field__label " for="input_662cfb72955b4" id="label_662cfb72955b4">
Normal text field
</label>
<div class="c-field__inner c-field__inner--text">
<input id="input_662cfb72955b4" value="" aria-labelledby="label_662cfb72955b4" 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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="error_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662cfb72955f9">
</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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="check_circle_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662cfb7295639">
</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="662cfb729568c" data-uid="662cfb729569e">
<label class="c-field__label " for="input_662cfb729568c" id="label_662cfb729568c">
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_662cfb729568c" value="" onkeydown="return event.keyCode !== 107" data-validation-message="Please enter a valid email" aria-labelledby="label_662cfb729568c" 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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="error_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662cfb72956d7">
</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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="check_circle_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662cfb729570c">
</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="662cfb729573e">
{{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="662cfb729578e" data-uid="662cfb72957a1">
<label class="c-field__label " for="input_662cfb729578e" id="label_662cfb729578e">
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_662cfb729578e" value="" onkeydown="return event.keyCode !== 107" data-validation-message="Please enter a valid email" aria-labelledby="label_662cfb729578e" 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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="error_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662cfb72957d9">
</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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="check_circle_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662cfb729580f">
</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="662cfb7295840">
{{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="662cfb729588f" data-uid="662cfb72958a1">
<label class="c-field__label u-sr__only" for="input_662cfb729588f" id="label_662cfb729588f">
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_662cfb729588f" 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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="error_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662cfb72958d8">
</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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="check_circle_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662cfb729590e">
</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="662cfb729593f">
{{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="662cfb729598b" data-uid="662cfb729599d">
<label class="c-field__label u-sr__only" for="input_662cfb729598b" id="label_662cfb729598b">
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_662cfb729598b" 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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="error_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662cfb72959d3">
</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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="check_circle_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662cfb7295a15">
</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="662cfb7295a48">
{{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="662cfb7295a9d" data-uid="662cfb7295ab0">
<label class="c-field__label u-sr__only" for="input_662cfb7295a9d" id="label_662cfb7295a9d">
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_662cfb7295a9d" 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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="error_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662cfb7295ae8">
</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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="check_circle_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662cfb7295b1e">
</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="662cfb7295b50">
{{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="662cfb7295d3f" data-uid="662cfb7295d4f">
<div class="c-field__inner c-field__inner--range">
<input id="input_662cfb7295d3f" 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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="error_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662cfb7295d87">
</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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="check_circle_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662cfb7295dbe">
</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="662cfb7295e34" data-uid="662cfb7295e44">
<div class="c-field__inner c-field__inner--color">
<input id="input_662cfb7295e34" 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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="error_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662cfb7295e7a">
</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-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="check_circle_outline" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662cfb7295eb1">
</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. |