<form class="example-form-material-like">
<div class="message--error is-hidden" role="alert">
<div class="message__container">
<div class="message__icon-container">
<span class="visually-hidden">Error message</span>
<p><b>Error</b>. The form is not valid! Please check the fields. This message is 100% customizable!</p>
<span class="message__close-button" tabindex="-1" role="button">
<span class="visually-hidden">Close</span>
</span>
</div>
</div>
</div>
<div class="radio--light">
<div class="radio__wrapper">
<input class="radio__input" id="already-user-true" type="radio" name="already_user" value="true" required="true" />
<label class="radio__label" for="already-user-true">I have an account already</label>
</div>
<!-- NOTE: This div is reserved for field-specific error messages by a backend -->
<!--<div class="radio__error">Put in the error message here...</div>-->
</div>
<div class="radio--light">
<div class="radio__wrapper">
<input class="radio__input" id="already-user-false" type="radio" name="already_user" value="false" required="true" />
<label class="radio__label" for="already-user-false">I don't have an account yet</label>
</div>
<!-- NOTE: This div is reserved for field-specific error messages by a backend -->
<!--<div class="radio__error">Put in the error message here...</div>-->
</div>
<div class="select--light">
<div class="select__wrapper">
<select class="select__select" id="salutation" name="salutation" required="true">
<option value="" disabled selected>Please choose</option>
<option value="Mr.">Mr.</option>
<option value="Ms.">Ms.</option>
<option value="Mrs.">Mrs.</option>
</select>
<label class="select__label" for="salutation">Salutation</label>
</div>
<!-- NOTE: This div is reserved for field-specific error messages by a backend -->
<!--<div class="select__error">Put in the error message here...</div>-->
</div>
<div class="text-field--light">
<div class="text-field__wrapper">
<input class="text-field__input" id="firstname" type="text" name="firstname" required="true" />
<label class="text-field__label" for="firstname">First name</label>
</div>
<div class="text-field__helper">Please enter all first names</div>
<!-- NOTE: This div is reserved for field-specific error messages by a backend -->
<!--<div class="text-field__error">Put in the error message here...</div>-->
</div>
<div class="text-field--light">
<div class="text-field__wrapper">
<input class="text-field__input" id="lastname" type="text" name="lastname" required="true" />
<label class="text-field__label" for="lastname">Last name</label>
</div>
<!-- NOTE: This div is reserved for field-specific error messages by a backend -->
<!--<div class="text-field__error">Put in the error message here...</div>-->
</div>
<div class="text-field--light">
<div class="text-field__wrapper">
<input class="text-field__input" id="email" type="email" name="email" required="true" />
<label class="text-field__label" for="email">Email</label>
</div>
<!-- NOTE: This div is reserved for field-specific error messages by a backend -->
<!--<div class="text-field__error">Put in the error message here...</div>-->
</div>
<div class="text-area--light">
<div class="text-area__wrapper">
<textarea class="text-area__input" id="message" type="text" name="message" required="true"></textarea>
<label class="text-area__label" for="message">Message</label>
</div>
<!-- NOTE: This div is reserved for field-specific error messages by a backend -->
<!--<div class="text-area__error">Put in the error message here...</div>-->
</div>
<div class="checkbox--light">
<div class="checkbox__wrapper">
<input class="checkbox__input" id="copy" type="checkbox" name="copy" value="true" required="true" />
<label class="checkbox__label" for="copy">I want a copy of my message</label>
</div>
<!-- NOTE: This div is reserved for field-specific error messages by a backend -->
<!--<div class="checkbox__error">Put in the error message here...</div>-->
</div>
<button type="submit">Submit</button>
</form>
<form class="example-form-material-like">
{{#ifLastDash _self.name "errors"}}
{{render '@message-material-like--error' form-message}}
{{/ifLastDash}}
{{render '@message-material-like--error' form-message-hidden}}
{{render '@radio-material-like--light' already_user}}
{{render '@radio-material-like--light' no_user}}
{{#ifLastDash _self.name "errors"}}
<div class="radio__error">
Please check one option
</div>
{{/ifLastDash}}
{{render '@select-material-like--light' salutation}}
{{render '@text-field-material-like--light' firstname}}
{{render '@text-field-material-like--light' lastname}}
{{render '@text-field-material-like--light' email}}
{{render '@text-area-material-like--light' message}}
{{render '@checkbox-material-like--light' copy}}
<button type="submit">Submit</button>
</form>
{
"form-message-hidden": {
"isHidden": true,
"message": "<p><b>Error</b>. The form is not valid! Please check the fields. This message is 100% customizable!</p>"
},
"form-message": {
"isHidden": false,
"message": "<p><b>Error</b>. The form is not valid! Please check the fields. This message is 100% customizable!</p>"
},
"already_user": {
"id": "already-user-true",
"name": "already_user",
"label": "I have an account already",
"value": "true",
"required": true,
"disabled": false,
"checked": false,
"error": ""
},
"no_user": {
"id": "already-user-false",
"name": "already_user",
"label": "I don't have an account yet",
"value": "false",
"required": true,
"disabled": false,
"checked": false,
"error": ""
},
"salutation": {
"id": "salutation",
"name": "salutation",
"label": "Salutation",
"required": true,
"disabled": false,
"selected": false,
"options": [
"Mr.",
"Ms.",
"Mrs."
],
"error": ""
},
"firstname": {
"id": "firstname",
"name": "firstname",
"label": "First name",
"required": true,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": "",
"error": "",
"helper": "Please enter all first names"
},
"lastname": {
"id": "lastname",
"name": "lastname",
"label": "Last name",
"required": true,
"value": "",
"disabled": false,
"type": "text",
"autocomplete": "",
"error": ""
},
"email": {
"id": "email",
"name": "email",
"label": "Email",
"required": true,
"value": "",
"disabled": false,
"type": "email",
"autocomplete": "",
"error": ""
},
"message": {
"id": "message",
"name": "message",
"label": "Message",
"required": true,
"value": "",
"disabled": false,
"error": ""
},
"copy": {
"id": "copy",
"name": "copy",
"label": "I want a copy of my message",
"value": "true",
"required": true,
"disabled": false,
"checked": false,
"error": ""
}
}
import './example-form-material-like.scss';
import '../../checkbox/checkbox-material-like/checkbox-material-like-bundle';
import '../../message/message-material-like/message-material-like-bundle';
import '../../radio/radio-material-like/radio-material-like-bundle';
import '../../select/select-material-like/select-material-like-bundle';
import '../../text-field/text-field-material-like/text-field-material-like-bundle';
import '../../text-area/text-area-material-like/text-area-material-like-bundle';
export * from './example-form-material-like';
import {Form} from '../../form/form';
export class ExampleFormMaterialLike extends Form {
constructor(context) {
super(context);
}
}
export const selector = '.example-form-material-like';
@import "~shared/base";
form {
@include form;
}
The only reason for this component is to demonstrate all form components in one place and for development purposes. It won’t be shipped in releases