Field
Displays different type of form fields.
Text
<!-- form.blade.php -->
<form class="c-form js-form-validation" autocomplete="on" id="6623e8af442ba" data-uid="6623e8af442bf" 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="6623e8af442ba-validation-error" data-uid="6623e8af44329" aria-labelledby="notice__text__6623e8af442ba-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="6623e8af44368">
report
</span>
</span>
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__6623e8af442ba-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="6623e8af442ba-validation-sucess" data-uid="6623e8af443a3" aria-labelledby="notice__text__6623e8af442ba-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="6623e8af443d1">
check
</span>
</span>
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__6623e8af442ba-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="6623e8af43642" data-uid="6623e8af43670">
<label class="c-field__label " for="input_6623e8af43642" id="label_6623e8af43642">
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_6623e8af43642" value="" onkeydown="return event.keyCode !== 107" data-validation-message="Please enter a valid email" aria-labelledby="label_6623e8af43642" placeholder="email@email.com" type="email" name="email" required="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="6623e8af436fc">
error_outline
</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="6623e8af43747">
check_circle_outline
</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="6623e8af437a5">
{{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="6623e8af4380a" data-uid="6623e8af43868">
<label class="c-field__label " for="input_6623e8af4380a" id="label_6623e8af4380a">
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_6623e8af4380a" value="" data-validation-message="You need to add a valid date!" aria-labelledby="label_6623e8af4380a" min="1997-06-29" max="2024-04-21" type="date" name="text" required="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="6623e8af438a8">
error_outline
</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="6623e8af438e2">
check_circle_outline
</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="6623e8af43916">
{{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="6623e8af43965" data-uid="6623e8af43976">
<label class="c-field__label " for="input_6623e8af43965" id="label_6623e8af43965">
Number
<span class="u-color__text--danger" aria-hidden="true">*</span>
</label>
<div class="c-field__inner c-field__inner--number">
<input id="input_6623e8af43965" value="" onkeydown="return event.keyCode !== 69" data-validation-message="Must be a number." aria-labelledby="label_6623e8af43965" type="number" name="number" required="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="6623e8af439cc">
error_outline
</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="6623e8af43a06">
check_circle_outline
</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="6623e8af43a4b">
{{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="6623e8af43a96" data-uid="6623e8af43aa8">
<label class="c-field__label " for="input_6623e8af43a96" id="label_6623e8af43a96">
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_6623e8af43a96" value="" data-validation-message="You need to fill in this field." aria-labelledby="label_6623e8af43a96" placeholder="correct horse battery staple" type="password" name="password" required="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="6623e8af43add">
error_outline
</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="6623e8af43b26">
check_circle_outline
</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="6623e8af43b5a">
{{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="6623e8af43bab" data-uid="6623e8af43bbf">
<label class="c-field__label " for="input_6623e8af43bab" id="label_6623e8af43bab">
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="6623e8af43bf7">
search
</span>
<input id="input_6623e8af43bab" value="" aria-labelledby="label_6623e8af43bab" type="search" name="search" required="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="6623e8af43c31">
error_outline
</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="6623e8af43c68">
check_circle_outline
</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="6623e8af43cb6" data-uid="6623e8af43cc4">
<label class="c-field__label " for="input_6623e8af43cb6" id="label_6623e8af43cb6">
Normal text field
</label>
<div class="c-field__inner c-field__inner--text">
<input id="input_6623e8af43cb6" value="" aria-labelledby="label_6623e8af43cb6" 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="6623e8af43cfb">
error_outline
</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="6623e8af43d31">
check_circle_outline
</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="6623e8af43d91" data-uid="6623e8af43da4">
<label class="c-field__label " for="input_6623e8af43d91" id="label_6623e8af43d91">
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_6623e8af43d91" value="" onkeydown="return event.keyCode !== 107" data-validation-message="Please enter a valid email" aria-labelledby="label_6623e8af43d91" placeholder="email@email.com" type="email" name="email" required="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="6623e8af43ddc">
error_outline
</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="6623e8af43e12">
check_circle_outline
</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="6623e8af43e45">
{{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="6623e8af43e95" data-uid="6623e8af43ea7">
<label class="c-field__label " for="input_6623e8af43e95" id="label_6623e8af43e95">
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_6623e8af43e95" value="" onkeydown="return event.keyCode !== 107" data-validation-message="Please enter a valid email" aria-labelledby="label_6623e8af43e95" placeholder="email@email.com" type="email" name="email" required="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="6623e8af43ede">
error_outline
</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="6623e8af43f15">
check_circle_outline
</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="6623e8af43f46">
{{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="6623e8af43f9d" data-uid="6623e8af43fae">
<label class="c-field__label u-sr__only" for="input_6623e8af43f9d" id="label_6623e8af43f9d">
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_6623e8af43f9d" 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-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="6623e8af43fe5">
error_outline
</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="6623e8af44018">
check_circle_outline
</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="6623e8af44046">
{{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="6623e8af4408f" data-uid="6623e8af440a0">
<label class="c-field__label u-sr__only" for="input_6623e8af4408f" id="label_6623e8af4408f">
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_6623e8af4408f" 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-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="6623e8af440d3">
error_outline
</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="6623e8af44107">
check_circle_outline
</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="6623e8af44136">
{{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="6623e8af441ac" data-uid="6623e8af441bf">
<label class="c-field__label u-sr__only" for="input_6623e8af441ac" id="label_6623e8af441ac">
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_6623e8af441ac" 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-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="6623e8af44203">
error_outline
</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="6623e8af44237">
check_circle_outline
</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="6623e8af44265">
{{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="6623e8af44943" data-uid="6623e8af44957">
<div class="c-field__inner c-field__inner--range">
<input id="input_6623e8af44943" 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="6623e8af44995">
error_outline
</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="6623e8af449cb">
check_circle_outline
</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="6623e8af44a5d" data-uid="6623e8af44a6c">
<div class="c-field__inner c-field__inner--color">
<input id="input_6623e8af44a5d" 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="6623e8af44aa0">
error_outline
</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="6623e8af44ad2">
check_circle_outline
</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. |