Field
Displays different type of form fields.
Text
<!-- form.blade.php -->
<form class="c-form js-form-validation" autocomplete="on" id="6638508fbc0f9" data-uid="6638508fbc0fe" 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="6638508fbc0f9-validation-error" data-uid="6638508fbca77" aria-labelledby="notice__text__6638508fbc0f9-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="6638508fbcaba">
</span>
</span>
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__6638508fbc0f9-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="6638508fbc0f9-validation-sucess" data-uid="6638508fbcaf3" aria-labelledby="notice__text__6638508fbc0f9-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="6638508fbcb1c">
</span>
</span>
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__6638508fbc0f9-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="6638508fb99fb" data-uid="6638508fb9a22">
<label class="c-field__label " for="input_6638508fb99fb" id="label_6638508fb99fb">
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_6638508fb99fb" value="" onkeydown="return event.keyCode !== 107" data-validation-message="Please enter a valid email" aria-labelledby="label_6638508fb99fb" 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="6638508fb9a9a">
</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="6638508fb9ade">
</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="6638508fb9b33">
{{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="6638508fb9b89" data-uid="6638508fbb7eb">
<label class="c-field__label " for="input_6638508fb9b89" id="label_6638508fb9b89">
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_6638508fb9b89" value="" data-validation-message="You need to add a valid date!" aria-labelledby="label_6638508fb9b89" min="1997-06-29" max="2024-05-07" 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="6638508fbb855">
</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="6638508fbb88f">
</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="6638508fbb8c2">
{{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="6638508fbb925" data-uid="6638508fbb937">
<label class="c-field__label " for="input_6638508fbb925" id="label_6638508fbb925">
Number
<span class="u-color__text--danger" aria-hidden="true">*</span>
</label>
<div class="c-field__inner c-field__inner--number">
<input id="input_6638508fbb925" value="" onkeydown="return event.keyCode !== 69" data-validation-message="Must be a number." aria-labelledby="label_6638508fbb925" 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="6638508fbb96f">
</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="6638508fbb9a3">
</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="6638508fbb9d2">
{{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="6638508fbba1a" data-uid="6638508fbba2b">
<label class="c-field__label " for="input_6638508fbba1a" id="label_6638508fbba1a">
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_6638508fbba1a" value="" data-validation-message="You need to fill in this field." aria-labelledby="label_6638508fbba1a" 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="6638508fbba5f">
</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="6638508fbba91">
</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="6638508fbbabf">
{{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="6638508fbbb05" data-uid="6638508fbbb17">
<label class="c-field__label " for="input_6638508fbbb05" id="label_6638508fbbb05">
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="6638508fbbb59">
</span>
<input id="input_6638508fbbb05" value="" aria-labelledby="label_6638508fbbb05" 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="6638508fbbb8e">
</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="6638508fbbbbd">
</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="6638508fbbc04" data-uid="6638508fbbc13">
<label class="c-field__label " for="input_6638508fbbc04" id="label_6638508fbbc04">
Normal text field
</label>
<div class="c-field__inner c-field__inner--text">
<input id="input_6638508fbbc04" value="" aria-labelledby="label_6638508fbbc04" 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="6638508fbbc45">
</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="6638508fbbc75">
</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="6638508fbbcc0" data-uid="6638508fbbcd0">
<label class="c-field__label " for="input_6638508fbbcc0" id="label_6638508fbbcc0">
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_6638508fbbcc0" value="" onkeydown="return event.keyCode !== 107" data-validation-message="Please enter a valid email" aria-labelledby="label_6638508fbbcc0" 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="6638508fbbd02">
</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="6638508fbbd31">
</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="6638508fbbd6a">
{{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="6638508fbbdaa" data-uid="6638508fbbdb9">
<label class="c-field__label " for="input_6638508fbbdaa" id="label_6638508fbbdaa">
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_6638508fbbdaa" value="" onkeydown="return event.keyCode !== 107" data-validation-message="Please enter a valid email" aria-labelledby="label_6638508fbbdaa" 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="6638508fbbde5">
</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="6638508fbbe11">
</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="6638508fbbe39">
{{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="6638508fbbe78" data-uid="6638508fbbe87">
<label class="c-field__label u-sr__only" for="input_6638508fbbe78" id="label_6638508fbbe78">
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_6638508fbbe78" 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="6638508fbbeb3">
</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="6638508fbbede">
</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="6638508fbbf05">
{{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="6638508fbbf49" data-uid="6638508fbbf58">
<label class="c-field__label u-sr__only" for="input_6638508fbbf49" id="label_6638508fbbf49">
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_6638508fbbf49" 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="6638508fbbf84">
</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="6638508fbbfaf">
</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="6638508fbbfd8">
{{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="6638508fbc022" data-uid="6638508fbc032">
<label class="c-field__label u-sr__only" for="input_6638508fbc022" id="label_6638508fbc022">
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_6638508fbc022" 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="6638508fbc05f">
</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="6638508fbc08a">
</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="6638508fbc0b2">
{{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="6638508fbcfe7" data-uid="6638508fbcff9">
<div class="c-field__inner c-field__inner--range">
<input id="input_6638508fbcfe7" 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="6638508fbd03f">
</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="6638508fbd073">
</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="6638508fbd4fc" data-uid="6638508fbd50a">
<div class="c-field__inner c-field__inner--color">
<input id="input_6638508fbd4fc" 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="6638508fbd53c">
</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="6638508fbd56e">
</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. |