Field
Displays different type of form fields.
Text
<!-- form.blade.php -->
<form class="c-form js-form-validation" autocomplete="on" id="id_69129ceeaa97d" data-uid="69129ceeaa986" 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="id_69129ceeaa97d-validation-error" data-uid="69129ceeaaa00" aria-labelledby="notice__text__id_69129ceeaa97d-validation-error">
<span class="c-notice__icon">
<br />
<b>Warning</b>: The parameter <b>"name"</b> is not recognized in the component <b>"icon"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>253</b><br />
<!-- icon.blade.php -->
<span class="c-icon c-icon--report c-icon--material c-icon--material-report material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--color-black c-icon--size-md" data-material-symbol="report" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69129ceeaaa77">
</span>
</span>
<span id="notice__text__id_69129ceeaa97d-validation-error" data-js-notice-message="true" 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="id_69129ceeaa97d-validation-sucess" data-uid="69129ceeaaad0" aria-labelledby="notice__text__id_69129ceeaa97d-validation-sucess">
<span class="c-notice__icon">
<br />
<b>Warning</b>: The parameter <b>"name"</b> is not recognized in the component <b>"icon"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>253</b><br />
<!-- icon.blade.php -->
<span class="c-icon c-icon--check c-icon--material c-icon--material-check material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--color-black c-icon--size-md" data-material-symbol="check" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69129ceeaab28">
</span>
</span>
<span id="notice__text__id_69129ceeaa97d-validation-sucess" data-js-notice-message="true" 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="id_69129ceea973c" data-uid="69129ceea976d">
<label class="c-field__label " for="input_id_69129ceea973c" id="label_id_69129ceea973c">
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_id_69129ceea973c" value="" onkeydown="return event.keyCode !== 107" data-validation-message="Please enter a valid email" aria-labelledby="label_id_69129ceea973c" placeholder="email@email.com" type="email" name="email" required="required" data-js-required="" data-required="1" aria-required="true" autocomplete="email">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69129ceea98ce">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69129ceea9934">
</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="69129ceea999a">
{{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="id_69129ceea99fe" data-uid="69129ceea9ec7">
<label class="c-field__label " for="input_id_69129ceea99fe" id="label_id_69129ceea99fe">
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_id_69129ceea99fe" value="" data-validation-message="You need to add a valid date!" aria-labelledby="label_id_69129ceea99fe" min="1997-06-29" max="2025-11-12" type="date" name="text" required="required" data-js-required="" data-required="1" aria-required="true" autocomplete="on">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69129ceea9f2f">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69129ceea9f7c">
</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="69129ceea9fbc">
{{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="id_69129ceeaa019" data-uid="69129ceeaa031">
<label class="c-field__label " for="input_id_69129ceeaa019" id="label_id_69129ceeaa019">
Number
<span class="u-color__text--danger" aria-hidden="true">*</span>
</label>
<div class="c-field__inner c-field__inner--number">
<input id="input_id_69129ceeaa019" value="" onkeydown="return event.keyCode !== 69" data-validation-message="Must be a number." aria-labelledby="label_id_69129ceeaa019" type="number" name="number" required="required" data-js-required="" data-required="1" aria-required="true" autocomplete="on">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69129ceeaa070">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69129ceeaa0b2">
</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="69129ceeaa0ec">
{{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="id_69129ceeaa152" data-uid="69129ceeaa168">
<label class="c-field__label " for="input_id_69129ceeaa152" id="label_id_69129ceeaa152">
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_id_69129ceeaa152" value="" data-validation-message="You need to fill in this field." aria-labelledby="label_id_69129ceeaa152" placeholder="correct horse battery staple" type="password" name="password" required="required" data-js-required="" data-required="1" aria-required="true" autocomplete="new-password">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69129ceeaa1a1">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69129ceeaa1dc">
</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="69129ceeaa210">
{{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="id_69129ceeaa25d" data-uid="69129ceeaa273">
<label class="c-field__label " for="input_id_69129ceeaa25d" id="label_id_69129ceeaa25d">
Search
<span class="u-color__text--danger" aria-hidden="true">*</span>
</label>
<div class="c-field__inner c-field__inner--search">
<!-- icon.blade.php -->
<span class="c-icon c-field__icon c-icon--search c-icon--material c-icon--material-search material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" data-material-symbol="search" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69129ceeaa2ab">
</span>
<input id="input_id_69129ceeaa25d" value="" aria-labelledby="label_id_69129ceeaa25d" type="search" name="search" required="required" data-js-required="" data-required="1" aria-required="true" autocomplete="on">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69129ceeaa2e7">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69129ceeaa31f">
</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="id_69129ceeaa36e" data-uid="69129ceeaa37f">
<label class="c-field__label " for="input_id_69129ceeaa36e" id="label_id_69129ceeaa36e">
Normal text field
</label>
<div class="c-field__inner c-field__inner--text">
<input id="input_id_69129ceeaa36e" value="" aria-labelledby="label_id_69129ceeaa36e" type="text" name="text" autocomplete="on">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69129ceeaa3b5">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69129ceeaa3ed">
</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="id_69129ceeaa440" data-uid="69129ceeaa455">
<label class="c-field__label " for="input_id_69129ceeaa440" id="label_id_69129ceeaa440">
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_id_69129ceeaa440" value="" onkeydown="return event.keyCode !== 107" data-validation-message="Please enter a valid email" aria-labelledby="label_id_69129ceeaa440" placeholder="email@email.com" type="email" name="email" required="required" data-js-required="" data-required="1" aria-required="true" autocomplete="email">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69129ceeaa48c">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69129ceeaa4c3">
</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="69129ceeaa500">
{{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="id_69129ceeaa54f" data-uid="69129ceeaa564">
<label class="c-field__label " for="input_id_69129ceeaa54f" id="label_id_69129ceeaa54f">
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_id_69129ceeaa54f" value="" onkeydown="return event.keyCode !== 107" data-validation-message="Please enter a valid email" aria-labelledby="label_id_69129ceeaa54f" placeholder="email@email.com" type="email" name="email" required="required" data-js-required="" data-required="1" aria-required="true" autocomplete="email">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69129ceeaa59a">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69129ceeaa5d3">
</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="69129ceeaa606">
{{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="id_69129ceeaa653" data-uid="69129ceeaa666">
<label class="c-field__label u-sr__only" for="input_id_69129ceeaa653" id="label_id_69129ceeaa653">
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_id_69129ceeaa653" value="" onkeydown="return event.keyCode !== 107" data-validation-message="Please enter a valid email" aria-label="Add your email" placeholder="email@email.com" type="email" name="email" required="required" data-js-required="" data-required="1" aria-required="true" autocomplete="email">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69129ceeaa69d">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69129ceeaa6d6">
</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="69129ceeaa709">
{{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="id_69129ceeaa753" data-uid="69129ceeaa767">
<label class="c-field__label u-sr__only" for="input_id_69129ceeaa753" id="label_id_69129ceeaa753">
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_id_69129ceeaa753" value="" data-validation-regexp="^[^@]+@[^@]+\.[^@]+$" data-validation-message="Please enter a valid email" aria-label="Add your email" placeholder="email@email.com" type="text" name="email_regexp" required="required" data-js-required="" data-required="1" aria-required="true" autocomplete="email">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69129ceeaa79d">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69129ceeaa7d5">
</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="69129ceeaa808">
{{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="id_69129ceeaa863" data-uid="69129ceeaa877">
<label class="c-field__label u-sr__only" for="input_id_69129ceeaa863" id="label_id_69129ceeaa863">
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_id_69129ceeaa863" value="" data-validation-regexp="^[^@]+@[^@]+\.[^@]+$" data-validation-message="Please enter a valid email" aria-label="Add your email" placeholder="email@email.com" type="text" name="email_regexp" required="required" data-js-required="" data-required="1" aria-required="true" autocomplete="email">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69129ceeaa8ae">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69129ceeaa8f1">
</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="69129ceeaa925">
{{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="id_69129ceeaabf0" data-uid="69129ceeaac04">
<div class="c-field__inner c-field__inner--range">
<input id="input_id_69129ceeaabf0" value="" aria-label="" type="range" name="rangeSlider" autocomplete="on">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69129ceeaac41">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69129ceeaac7f">
</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="id_69129ceeaad35" data-uid="69129ceeaad4a">
<div class="c-field__inner c-field__inner--color">
<input id="input_id_69129ceeaad35" value="" aria-label="" type="color" name="colorPicker" autocomplete="on">
<div class="c-field_focus-styler u-level-top"></div>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__error-icon c-icon--error-outline c-icon--material c-icon--material-error_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="error_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69129ceeaad85">
</span>
<!-- icon.blade.php -->
<span class="c-icon c-field__suffix c-field__success-icon c-icon--check-circle-outline c-icon--material c-icon--material-check_circle_outline material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="check_circle_outline" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69129ceeaadc2">
</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. |
| moveAttributesListToFieldAttributes | true | boolean | - | If we should move attributesList to fieldAttributeList automatically |
| description | string | - | Description for the field. | |
| 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. |