Field

The Field component provides a reusable pattern for field in the interface.

Text

Note: Attributes can both be set as component parameters and in attribute list. Using attributes implemented in component parameters, will result in a warning. Attributes set will automatically appear wherever suitable (on html-input or component level).

Add your email

Enter a date

Number

Set your password

Hey! Want some help with this?

Normal text field

Add your e-mail

Add your email

Add your email (custom regexp validation)

Add your email

<form class="c-form js-form-validation" autocomplete="on" id="id_6aaefbdcd0dcb" data-component="form" method="post" action="#" name="id_6aaefbdcd0dcb">
  <!-- notice.blade.php -->
  <div class="c-notice c-form__notice-failed u-margin__bottom--4 c-notice--danger" aria-hidden="true" id="id_6aaefbdcd0dcb-validation-error" data-component="notice" aria-labelledby=
  "notice__text__id_6aaefbdcd0dcb-validation-error">
    <span class="c-notice__icon"><!-- icon.blade.php --></span> <span id="notice__text__id_6aaefbdcd0dcb-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_6aaefbdcd0dcb-validation-sucess" data-component="notice" aria-labelledby=
  "notice__text__id_6aaefbdcd0dcb-validation-sucess">
    <span class="c-notice__icon"><!-- icon.blade.php --></span> <span id="notice__text__id_6aaefbdcd0dcb-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">
      <!-- field.blade.php -->
      <div class="c-field c-field--email c-field--md c-field--radius-md" id="id_6aaefbdccf5d3" data-component="field">
        <label class="c-field__label" for="input_id_6aaefbdccf5d3" id="label_id_6aaefbdccf5d3">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_6aaefbdccf5d3" value="" onkeydown="return event.keyCode !== 107" data-validation-message="Please enter a valid email" aria-labelledby="label_id_6aaefbdccf5d3"
          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 -->
           <!-- icon.blade.php -->
        </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-component="typography">{{VALIDATION_ERROR_MESSAGE}}</span>
        </div>
      </div>
    </div>
    <div class="grid-md-6">
      <!-- field.blade.php -->
      <div class="c-field c-field--date c-field--icon c-field--md c-field--radius-md" id="id_6aaefbdccf942" data-component="field">
        <label class="c-field__label" for="input_id_6aaefbdccf942" id="label_id_6aaefbdccf942">Enter a date <span class="u-color__text--danger" aria-hidden="true">*</span></label>
        <div class="c-field__inner c-field__inner--date">
          <!-- icon.blade.php -->
           <input id="input_id_6aaefbdccf942" value="" data-validation-message="You need to add a valid date!" aria-labelledby="label_id_6aaefbdccf942" min="1997-06-29" max="2026-09-20" 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 -->
           <!-- icon.blade.php -->
        </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-component="typography">{{VALIDATION_ERROR_MESSAGE}}</span>
        </div>
      </div>
    </div>
    <div class="grid-md-6">
      <!-- field.blade.php -->
      <div class="c-field c-field--number c-field--md c-field--radius-md" id="id_6aaefbdccfc8c" data-component="field">
        <label class="c-field__label" for="input_id_6aaefbdccfc8c" id="label_id_6aaefbdccfc8c">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_6aaefbdccfc8c" value="" onkeydown="return event.keyCode !== 69" data-validation-message="Must be a number." aria-labelledby="label_id_6aaefbdccfc8c" 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 -->
           <!-- icon.blade.php -->
        </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-component="typography">{{VALIDATION_ERROR_MESSAGE}}</span>
        </div>
      </div>
    </div>
    <div class="grid-md-6">
      <!-- field.blade.php -->
      <div class="c-field c-field--password c-field--md c-field--radius-md" id="id_6aaefbdccfe8a" data-component="field">
        <label class="c-field__label" for="input_id_6aaefbdccfe8a" id="label_id_6aaefbdccfe8a">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_6aaefbdccfe8a" value="" data-validation-message="You need to fill in this field." aria-labelledby="label_id_6aaefbdccfe8a" 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 -->
           <!-- icon.blade.php -->
        </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-component="typography">{{VALIDATION_ERROR_MESSAGE}}</span>
        </div><small class="c-field__helper">Hey! Want some help with this?</small>
      </div>
    </div>
    <div class="grid-md-6">
      <!-- field.blade.php -->
      <div class="c-field c-field--search c-field--icon c-field--md c-field--radius-md" id="id_6aaefbdcd008e" data-component="field">
        <label class="c-field__label" for="input_id_6aaefbdcd008e" id="label_id_6aaefbdcd008e">Search <span class="u-color__text--danger" aria-hidden="true">*</span></label>
        <div class="c-field__inner c-field__inner--search">
          <!-- icon.blade.php -->
           <input id="input_id_6aaefbdcd008e" value="" aria-labelledby="label_id_6aaefbdcd008e" 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 -->
           <!-- icon.blade.php -->
        </div>
      </div>
    </div>
    <div class="grid-md-6">
      <!-- field.blade.php -->
      <div class="c-field c-field--text c-field--md c-field--radius-md" id="id_6aaefbdcd023f" data-component="field">
        <label class="c-field__label" for="input_id_6aaefbdcd023f" id="label_id_6aaefbdcd023f">Normal text field</label>
        <div class="c-field__inner c-field__inner--text">
          <input id="input_id_6aaefbdcd023f" value="" aria-labelledby="label_id_6aaefbdcd023f" type="text" name="text" autocomplete="on" />
          <div class="c-field_focus-styler u-level-top"></div><!-- icon.blade.php -->
           <!-- icon.blade.php -->
        </div>
      </div>
    </div>
    <div class="grid-md-6">
      <!-- field.blade.php -->
      <div class="c-field is-invalid c-field--email c-field--md c-field--radius-md" id="id_6aaefbdcd0394" data-component="field">
        <label class="c-field__label" for="input_id_6aaefbdcd0394" id="label_id_6aaefbdcd0394">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_6aaefbdcd0394" value="" onkeydown="return event.keyCode !== 107" data-validation-message="Please enter a valid email" aria-labelledby="label_id_6aaefbdcd0394"
          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 -->
           <!-- icon.blade.php -->
        </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-component="typography">{{VALIDATION_ERROR_MESSAGE}}</span>
        </div>
      </div>
    </div>
    <div class="grid-md-6">
      <!-- field.blade.php -->
      <div class="c-field is-valid c-field--email c-field--md c-field--radius-md" id="id_6aaefbdcd05a3" data-component="field">
        <label class="c-field__label" for="input_id_6aaefbdcd05a3" id="label_id_6aaefbdcd05a3">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_6aaefbdcd05a3" value="" onkeydown="return event.keyCode !== 107" data-validation-message="Please enter a valid email" aria-labelledby="label_id_6aaefbdcd05a3"
          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 -->
           <!-- icon.blade.php -->
        </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-component="typography">{{VALIDATION_ERROR_MESSAGE}}</span>
        </div>
      </div>
    </div>
    <div class="grid-md-6">
      <!-- field.blade.php -->
      <div class="c-field c-field--email c-field--md c-field--radius-md" id="id_6aaefbdcd07d8" data-component="field">
        <label class="c-field__label u-sr__only" for="input_id_6aaefbdcd07d8" id="label_id_6aaefbdcd07d8">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_6aaefbdcd07d8" 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 -->
           <!-- icon.blade.php -->
        </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-component="typography">{{VALIDATION_ERROR_MESSAGE}}</span>
        </div>
      </div>
    </div>
    <div class="grid-md-6">
      <!-- field.blade.php -->
      <div class="c-field c-field--text c-field--md c-field--radius-md" id="id_6aaefbdcd09d7" data-component="field">
        <label class="c-field__label u-sr__only" for="input_id_6aaefbdcd09d7" id="label_id_6aaefbdcd09d7">Add your email (custom regexp validation) <span class="u-color__text--danger" aria-hidden=
        "true">*</span></label>
        <div class="c-field__inner c-field__inner--text">
          <input id="input_id_6aaefbdcd09d7" value="" data-validation-regexp="^[^@]+@[^@]+\.[^@]+$" data-validation-message="Please enter a valid email" aria-label=
          "Add your email (custom regexp validation)" 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 -->
           <!-- icon.blade.php -->
        </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-component="typography">{{VALIDATION_ERROR_MESSAGE}}</span>
        </div>
      </div>
    </div>
    <div class="grid-md-6">
      <!-- field.blade.php -->
      <div class="c-field c-field--text c-field--md c-field--shadow c-field--radius-md" id="id_6aaefbdcd0bdf" data-component="field">
        <label class="c-field__label u-sr__only" for="input_id_6aaefbdcd0bdf" id="label_id_6aaefbdcd0bdf">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_6aaefbdcd0bdf" 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 -->
           <!-- icon.blade.php -->
        </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-component="typography">{{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">
            @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">
            @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",
                ],
                'icon' => ['icon' => 'date_range']
            ])
            @endfield
        </div>

        <div class="grid-md-6">
            @field([
                'type' => 'number',
                'name' => 'number',
                'required' => true,
                'label' => "Number",
                'invalidMessage' => 'Must be a number.',
            ])
            @endfield
        </div>

        <div class="grid-md-6">
            @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">
            @field([
                'type' => 'search',
                'name' => 'search',
                'required' => true,
                'label' => "Search",
                'icon' => ['icon' => 'search']
            ])
            @endfield
        </div>

        <div class="grid-md-6">
            @field([
                'type' => 'text',
                'name' => 'text',
                'label' => "Normal text field"
            ])
            @endfield
        </div>

        <div class="grid-md-6">
            @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">
            @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">
            @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">
            @field([
                'type' => 'text',
                'placeholder' => 'email@email.com',
                'name' => 'email_regexp',
                'autocomplete' => 'email',
                'validationRegexp' => '^[^@]+@[^@]+\.[^@]+$',
                'invalidMessage' => 'Please enter a valid email',
                'label' => "Add your email (custom regexp validation)",
                'required' => true,
                'hideLabel' => true,
            ])
            @endfield
        </div>


        <div class="grid-md-6">
            @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>
@endform

Text (outside of card)

Add your email

Enter a date

Number

Set your password

Hey! Want some help with this?

Normal text field

Add your e-mail

Add your email

Add your email (custom regexp validation)

Add your email

<form class="c-form js-form-validation" autocomplete="on" id="id_6aaefbdcd2c10" data-component="form" method="post" action="#" name="id_6aaefbdcd2c10">
  <!-- notice.blade.php -->
  <div class="c-notice c-form__notice-failed u-margin__bottom--4 c-notice--danger" aria-hidden="true" id="id_6aaefbdcd2c10-validation-error" data-component="notice" aria-labelledby=
  "notice__text__id_6aaefbdcd2c10-validation-error">
    <span class="c-notice__icon"><!-- icon.blade.php --></span> <span id="notice__text__id_6aaefbdcd2c10-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_6aaefbdcd2c10-validation-sucess" data-component="notice" aria-labelledby=
  "notice__text__id_6aaefbdcd2c10-validation-sucess">
    <span class="c-notice__icon"><!-- icon.blade.php --></span> <span id="notice__text__id_6aaefbdcd2c10-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">
      <!-- field.blade.php -->
      <div class="c-field c-field--email c-field--md c-field--radius-md" id="id_6aaefbdcd1647" data-component="field">
        <label class="c-field__label" for="input_id_6aaefbdcd1647" id="label_id_6aaefbdcd1647">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_6aaefbdcd1647" value="" onkeydown="return event.keyCode !== 107" data-validation-message="Please enter a valid email" aria-labelledby="label_id_6aaefbdcd1647"
          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 -->
           <!-- icon.blade.php -->
        </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-component="typography">{{VALIDATION_ERROR_MESSAGE}}</span>
        </div>
      </div>
    </div>
    <div class="grid-md-6">
      <!-- field.blade.php -->
      <div class="c-field c-field--date c-field--icon c-field--md c-field--radius-md" id="id_6aaefbdcd187f" data-component="field">
        <label class="c-field__label" for="input_id_6aaefbdcd187f" id="label_id_6aaefbdcd187f">Enter a date <span class="u-color__text--danger" aria-hidden="true">*</span></label>
        <div class="c-field__inner c-field__inner--date">
          <!-- icon.blade.php -->
           <input id="input_id_6aaefbdcd187f" value="" data-validation-message="You need to add a valid date!" aria-labelledby="label_id_6aaefbdcd187f" min="1997-06-29" max="2026-09-20" 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 -->
           <!-- icon.blade.php -->
        </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-component="typography">{{VALIDATION_ERROR_MESSAGE}}</span>
        </div>
      </div>
    </div>
    <div class="grid-md-6">
      <!-- field.blade.php -->
      <div class="c-field c-field--number c-field--md c-field--radius-md" id="id_6aaefbdcd1b01" data-component="field">
        <label class="c-field__label" for="input_id_6aaefbdcd1b01" id="label_id_6aaefbdcd1b01">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_6aaefbdcd1b01" value="" onkeydown="return event.keyCode !== 69" data-validation-message="Must be a number." aria-labelledby="label_id_6aaefbdcd1b01" 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 -->
           <!-- icon.blade.php -->
        </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-component="typography">{{VALIDATION_ERROR_MESSAGE}}</span>
        </div>
      </div>
    </div>
    <div class="grid-md-6">
      <!-- field.blade.php -->
      <div class="c-field c-field--password c-field--md c-field--radius-md" id="id_6aaefbdcd1d05" data-component="field">
        <label class="c-field__label" for="input_id_6aaefbdcd1d05" id="label_id_6aaefbdcd1d05">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_6aaefbdcd1d05" value="" data-validation-message="You need to fill in this field." aria-labelledby="label_id_6aaefbdcd1d05" 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 -->
           <!-- icon.blade.php -->
        </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-component="typography">{{VALIDATION_ERROR_MESSAGE}}</span>
        </div><small class="c-field__helper">Hey! Want some help with this?</small>
      </div>
    </div>
    <div class="grid-md-6">
      <!-- field.blade.php -->
      <div class="c-field c-field--search c-field--icon c-field--md c-field--radius-md" id="id_6aaefbdcd1f0d" data-component="field">
        <label class="c-field__label" for="input_id_6aaefbdcd1f0d" id="label_id_6aaefbdcd1f0d">Search <span class="u-color__text--danger" aria-hidden="true">*</span></label>
        <div class="c-field__inner c-field__inner--search">
          <!-- icon.blade.php -->
           <input id="input_id_6aaefbdcd1f0d" value="" aria-labelledby="label_id_6aaefbdcd1f0d" 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 -->
           <!-- icon.blade.php -->
        </div>
      </div>
    </div>
    <div class="grid-md-6">
      <!-- field.blade.php -->
      <div class="c-field c-field--text c-field--md c-field--radius-md" id="id_6aaefbdcd20c0" data-component="field">
        <label class="c-field__label" for="input_id_6aaefbdcd20c0" id="label_id_6aaefbdcd20c0">Normal text field</label>
        <div class="c-field__inner c-field__inner--text">
          <input id="input_id_6aaefbdcd20c0" value="" aria-labelledby="label_id_6aaefbdcd20c0" type="text" name="text" autocomplete="on" />
          <div class="c-field_focus-styler u-level-top"></div><!-- icon.blade.php -->
           <!-- icon.blade.php -->
        </div>
      </div>
    </div>
    <div class="grid-md-6">
      <!-- field.blade.php -->
      <div class="c-field is-invalid c-field--email c-field--md c-field--radius-md" id="id_6aaefbdcd2218" data-component="field">
        <label class="c-field__label" for="input_id_6aaefbdcd2218" id="label_id_6aaefbdcd2218">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_6aaefbdcd2218" value="" onkeydown="return event.keyCode !== 107" data-validation-message="Please enter a valid email" aria-labelledby="label_id_6aaefbdcd2218"
          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 -->
           <!-- icon.blade.php -->
        </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-component="typography">{{VALIDATION_ERROR_MESSAGE}}</span>
        </div>
      </div>
    </div>
    <div class="grid-md-6">
      <!-- field.blade.php -->
      <div class="c-field is-valid c-field--email c-field--md c-field--radius-md" id="id_6aaefbdcd2414" data-component="field">
        <label class="c-field__label" for="input_id_6aaefbdcd2414" id="label_id_6aaefbdcd2414">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_6aaefbdcd2414" value="" onkeydown="return event.keyCode !== 107" data-validation-message="Please enter a valid email" aria-labelledby="label_id_6aaefbdcd2414"
          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 -->
           <!-- icon.blade.php -->
        </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-component="typography">{{VALIDATION_ERROR_MESSAGE}}</span>
        </div>
      </div>
    </div>
    <div class="grid-md-6">
      <!-- field.blade.php -->
      <div class="c-field c-field--email c-field--md c-field--radius-md" id="id_6aaefbdcd263e" data-component="field">
        <label class="c-field__label u-sr__only" for="input_id_6aaefbdcd263e" id="label_id_6aaefbdcd263e">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_6aaefbdcd263e" 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 -->
           <!-- icon.blade.php -->
        </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-component="typography">{{VALIDATION_ERROR_MESSAGE}}</span>
        </div>
      </div>
    </div>
    <div class="grid-md-6">
      <!-- field.blade.php -->
      <div class="c-field c-field--text c-field--md c-field--radius-md" id="id_6aaefbdcd283e" data-component="field">
        <label class="c-field__label u-sr__only" for="input_id_6aaefbdcd283e" id="label_id_6aaefbdcd283e">Add your email (custom regexp validation) <span class="u-color__text--danger" aria-hidden=
        "true">*</span></label>
        <div class="c-field__inner c-field__inner--text">
          <input id="input_id_6aaefbdcd283e" value="" data-validation-regexp="^[^@]+@[^@]+\.[^@]+$" data-validation-message="Please enter a valid email" aria-label=
          "Add your email (custom regexp validation)" 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 -->
           <!-- icon.blade.php -->
        </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-component="typography">{{VALIDATION_ERROR_MESSAGE}}</span>
        </div>
      </div>
    </div>
    <div class="grid-md-6">
      <!-- field.blade.php -->
      <div class="c-field c-field--text c-field--md c-field--shadow c-field--radius-md" id="id_6aaefbdcd2a48" data-component="field">
        <label class="c-field__label u-sr__only" for="input_id_6aaefbdcd2a48" id="label_id_6aaefbdcd2a48">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_6aaefbdcd2a48" 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 -->
           <!-- icon.blade.php -->
        </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-component="typography">{{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">
            @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">
            @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",
                ],
                'icon' => ['icon' => 'date_range']
            ])
            @endfield
        </div>

        <div class="grid-md-6">
            @field([
                'type' => 'number',
                'name' => 'number',
                'required' => true,
                'label' => "Number",
                'invalidMessage' => 'Must be a number.',
            ])
            @endfield
        </div>

        <div class="grid-md-6">
            @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">
            @field([
                'type' => 'search',
                'name' => 'search',
                'required' => true,
                'label' => "Search",
                'icon' => ['icon' => 'search']
            ])
            @endfield
        </div>

        <div class="grid-md-6">
            @field([
                'type' => 'text',
                'name' => 'text',
                'label' => "Normal text field"
            ])
            @endfield
        </div>

        <div class="grid-md-6">
            @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">
            @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">
            @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">
            @field([
                'type' => 'text',
                'placeholder' => 'email@email.com',
                'name' => 'email_regexp',
                'autocomplete' => 'email',
                'validationRegexp' => '^[^@]+@[^@]+\.[^@]+$',
                'invalidMessage' => 'Please enter a valid email',
                'label' => "Add your email (custom regexp validation)",
                'required' => true,
                'hideLabel' => true,
            ])
            @endfield
        </div>


        <div class="grid-md-6">
            @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>
@endform

Range

<div class="c-field c-field--range c-field--md c-field--radius-md" id="id_6aaefbdcd31d3" data-component="field">
  <div class="c-field__inner c-field__inner--range">
    <input id="input_id_6aaefbdcd31d3" value="" aria-label="" type="range" name="rangeSlider" autocomplete="on" />
    <div class="c-field_focus-styler u-level-top"></div><!-- icon.blade.php -->
     <!-- icon.blade.php -->
  </div>
</div>

Color

<div class="c-field c-field--color c-field--md c-field--radius-md" id="id_6aaefbdcd36e1" data-component="field">
  <div class="c-field__inner c-field__inner--color">
    <input id="input_id_6aaefbdcd36e1" value="" aria-label="" type="color" name="colorPicker" autocomplete="on" />
    <div class="c-field_focus-styler u-level-top"></div><!-- icon.blade.php -->
     <!-- icon.blade.php -->
  </div>
</div>

API

Parameter	Default	Type	Description
label		string	-
name		string	-
type	text	string	-
validationRegexp	false	string\|boolean	-
invalidMessage	false	string\|boolean	-
required	false	boolean	-
autocomplete	on	string	-
value		string	-
icon		array\|string	-
size	md	string	-
radius	md	string	-
placeholder		string	-
hideLabel	false	boolean	-
helperText		string	-
multiline	false	integer\|boolean	-
borderless	false	boolean	-
shadow	false	boolean	-
fieldAttributeList	[]	array	-
moveAttributesListToFieldAttributes	true	boolean	-
description		string	-

CSS API

Variable	Default	Type	Values	Description
--c-field--border-radius	var(--border-radius)	range	-	Border Radius
--c-field--border-width	var(--border-width)	range	-	Size
--c-field--space	var(--space)	range	-	Base spacing unit. Used for padding and margin inside components.
--c-field--color--danger	var(--color--danger)	color	-	Danger
--c-field--color--success	var(--color--success)	color	-	Success
--c-field--color--surface	var(--color--surface)	color	-	Surface
--c-field--color--surface-alt	var(--color--surface-alt)	color	-	Manual companion token for subtle surface backgrounds.
--c-field--color--surface-border	var(--color--surface-border)	color	-	Manual companion token for borders on surface elements.
--c-field--shadow-color	var(--shadow-color)	rgba	-	Shadow Color
--c-field--shadow-amount	var(--shadow-amount)	range	-	Multiplier for elevation shadows. 0 = none, 1 = default.
--c-field--color--surface-contrast	var(--color--surface-contrast)	color	-	Used for text and icons on surface backgrounds with less contrast.
--c-field--base	var(--base)	range	-	Main unit that drives radius and spacing scales.
--c-field--corner-shape	var(--corner-shape)	select	square, round, squircle, circular, bevel, scoop	Corner Shape
--c-field--color--primary	var(--color--primary)	color	-	Primary
--c-field--color--danger-contrast	var(--color--danger-contrast)	color	-	Danger Contrast

Similar components

File Input Image Footer