Field

Displays different type of form fields.

Text

Input field - E-mail

error

Input field - Date Picker

error

Input field - Number

error

Input field - Password

error

Input field - Search (with icon)

search
error

Input field - Text

error

Different text fields.

<!-- form.blade.php -->
<form id="61efa58ed1001" class="c-form" autocomplete="on" data-uid="61efa58ed0ffd" method="POST" action="#">
    <div class="grid">
                <div class="grid-md-6">
                    <h2>Input field - E-mail</h2>
                    <!-- field.blade.php -->
<label id="label_61efa58ed0804" class="c-field__text--label" for="input_61efa58ed0804">Add your E-mail</label>

<div id="61efa58ed0804" class="c-field c-field__text c-field--md c-field--radius-md">

    
    <input id="input_61efa58ed0804"
           value=""
           type="email" name="email" pattern="^[^@]+@[^@]+\.[^@]+$" autocomplete="e-mail" data-invalid-message="You need to add a valid E-mail!" aria-labelledby="label_61efa58ed0804" data-uid="61efa58ed081d"
                          required
               data-required="1"
               aria-required="true"
                      placeholder="email@email.com"
    />
    <label class="c-field__text--placeholder">
        email@email.com
    </label>

    <div id="error_input_61efa58ed0804_message" class="c-field__input-invalid-message">
        <!-- icon.blade.php -->
    <i id="61efa58ed08cf" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="61efa58ed08ca">
                    error
            </i>
        <span class="errorText"></span>
    </div>
</div>
                </div>

                <div class="grid-md-6">
                    <h2>Input field - Date Picker</h2>
                    <!-- field.blade.php -->
<label id="label_61efa58ed0961" class="c-field__text--label" for="input_61efa58ed0961">Enter a date</label>

<div id="61efa58ed0961" class="c-field c-field__datepicker c-field--md c-field--radius-md">

    
    <input id="input_61efa58ed0961"
           value=""
           type="text" name="text" data-invalid-message="You need to add a valid date!" aria-labelledby="label_61efa58ed0961" js-datepicker="1" c-datepicker-min="6/29/1997" c-datepicker-max="1/26/2022" c-datepicker-title="Välj ett datum" c-datepicker-showResetButton="1" c-datepicker-showDaysOutOfMonth="1" c-datepicker-showClearButton="1" c-datepicker-hideOnBlur="1" c-datepicker-hideOnSelect="" data-uid="61efa58ed0ae2"
                          required
               data-required="1"
               aria-required="true"
                      placeholder=""
    />
    <label class="c-field__text--placeholder">
        
    </label>

    <div id="error_input_61efa58ed0961_message" class="c-field__input-invalid-message">
        <!-- icon.blade.php -->
    <i id="61efa58ed0b43" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="61efa58ed0b3f">
                    error
            </i>
        <span class="errorText"></span>
    </div>
</div>
                </div>

                <div class="grid-md-6">

                    <h2>Input field - Number</h2>
                    <!-- field.blade.php -->
<label id="label_61efa58ed0bbe" class="c-field__text--label" for="input_61efa58ed0bbe">Number</label>

<div id="61efa58ed0bbe" class="c-field c-field__text c-field--md c-field--radius-md">

    
    <input id="input_61efa58ed0bbe"
           value=""
           type="number" name="number" required="1" data-invalid-message="Must be a number " aria-labelledby="label_61efa58ed0bbe" data-uid="61efa58ed0bc9"
                      placeholder=""
    />
    <label class="c-field__text--placeholder">
        
    </label>

    <div id="error_input_61efa58ed0bbe_message" class="c-field__input-invalid-message">
        <!-- icon.blade.php -->
    <i id="61efa58ed0c13" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="61efa58ed0c10">
                    error
            </i>
        <span class="errorText"></span>
    </div>
</div>
                </div>
                <div class="grid-md-6">

                    <h2>Input field - Password</h2>
                    <!-- field.blade.php -->
<label id="label_61efa58ed0c84" class="c-field__text--label" for="input_61efa58ed0c84">Set your password</label>

<div id="61efa58ed0c84" class="c-field c-field__text c-field--md c-field--radius-md">

    
    <input id="input_61efa58ed0c84"
           value=""
           type="password" name="password" required="1" autocomplete="new-password" aria-labelledby="label_61efa58ed0c84" data-uid="61efa58ed0c8f"
                      placeholder=""
    />
    <label class="c-field__text--placeholder">
        
    </label>

    <div id="error_input_61efa58ed0c84_message" class="c-field__input-invalid-message">
        <!-- icon.blade.php -->
    <i id="61efa58ed0cdd" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="61efa58ed0cd9">
                    error
            </i>
        <span class="errorText"></span>
    </div>
</div>
                </div>

                <div class="grid-md-6">

                    <h2>Input field - Search (with icon)</h2>
                    <!-- field.blade.php -->
<label id="label_61efa58ed0d4d" class="c-field__text--label" for="input_61efa58ed0d4d">Search</label>

<div id="61efa58ed0d4d" class="c-field c-field__text c-field--icon c-field--md c-field--radius-md">

            <!-- icon.blade.php -->
    <i id="61efa58ed0da0" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efa58ed0d9d">
                    search
            </i>
    
    <input id="input_61efa58ed0d4d"
           value=""
           type="search" name="search" required="1" aria-labelledby="label_61efa58ed0d4d" data-uid="61efa58ed0d59"
                      placeholder=""
    />
    <label class="c-field__text--placeholder">
        
    </label>

    <div id="error_input_61efa58ed0d4d_message" class="c-field__input-invalid-message">
        <!-- icon.blade.php -->
    <i id="61efa58ed0de6" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="61efa58ed0de3">
                    error
            </i>
        <span class="errorText"></span>
    </div>
</div>

                </div>

                <div class="grid-md-6">

                    <h2>Input field - Text</h2>
                    <!-- field.blade.php -->
<label id="label_61efa58ed0e55" class="c-field__text--label" for="input_61efa58ed0e55">Normal text field</label>

<div id="61efa58ed0e55" class="c-field c-field__text c-field--md c-field--radius-md">

    
    <input id="input_61efa58ed0e55"
           value=""
           type="text" name="text" aria-labelledby="label_61efa58ed0e55" data-uid="61efa58ed0e60"
                      placeholder=""
    />
    <label class="c-field__text--placeholder">
        
    </label>

    <div id="error_input_61efa58ed0e55_message" class="c-field__input-invalid-message">
        <!-- icon.blade.php -->
    <i id="61efa58ed0ea7" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="61efa58ed0ea3">
                    error
            </i>
        <span class="errorText"></span>
    </div>
</div>

                </div>

            </div>
</form>
@form([
            'attributeList' => [
                'autocomplete' => 'on'
            ]
        ])
            <div class="grid">
                <div class="grid-md-6">
                    @markdown
                        ##Input field - E-mail
                    @endmarkdown

                    @field([
                        'type' => 'text',
                        'placeholder' => 'email@email.com',
                        'attributeList' => [
                            'type' => 'email',
                            'name' => 'email',
                            'pattern' => '^[^@]+@[^@]+\.[^@]+$',
                            'autocomplete' => 'e-mail',
                            'data-invalid-message' => "You need to add a valid E-mail!"
                        ],
                        'label' => "Add your E-mail",
                        'required' => true,
                    ])
                    @endfield
                </div>

                <div class="grid-md-6">
                    @markdown
                    ##Input field - Date Picker
                    @endmarkdown

                    @field([
                        'type' => 'datepicker',
                        'value' => '',
                        'label' => 'Enter a date',
                        'attributeList' => [
                            'type' => 'text',
                            'name' => 'text',
                            'data-invalid-message' => "You need to add a valid date!",
                        ],
                        'required' => true,
                        'datepicker' => [
                            'title'                 => 'Välj ett datum',
                            'minDate'               => "6/29/1997",
                            'maxDate'               => "tomorrow",
                            'required'              => true,
                            'showResetButton'       => true,
                            'showDaysOutOfMonth'    => true,
                            'showClearButton'       => true,
                            'hideOnBlur'            => true,
                            'hideOnSelect'          => false,
                        ]
                    ])
                    @endfield
                </div>

                <div class="grid-md-6">

                    @markdown
                    ##Input field - Number
                    @endmarkdown

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

                    @markdown
                    ##Input field - Password
                    @endmarkdown

                    @field([
                        'type' => 'text',
                        'attributeList' => [
                            'type' => 'password',
                            'name' => 'password',
                            'required' => true,
                            'autocomplete' => "new-password",
                        ],
                        'label' => "Set your password"
                    ])
                    @endfield
                </div>

                <div class="grid-md-6">

                    @markdown
                    ##Input field - Search (with icon)
                    @endmarkdown

                    @field([
                        'type' => 'text',
                        'attributeList' => [
                            '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',
                        'attributeList' => [
                            'type' => 'text',
                            'name' => 'text',
                        ],
                        'label' => "Normal text field"
                    ])
                    @endfield

                </div>

            </div>
        @endform

Range

error

<!-- field.blade.php -->

<div id="61efa58ed13ee" class="c-field c-field__range c-field--md c-field--radius-md">

    
    <input id="input_61efa58ed13ee"
           value=""
           type="range" name="rangeSlider" aria-label="" data-uid="61efa58ed13fb"
                      placeholder=""
    />
    <label class="c-field__text--placeholder">
        
    </label>

    <div id="error_input_61efa58ed13ee_message" class="c-field__input-invalid-message">
        <!-- icon.blade.php -->
    <i id="61efa58ed1449" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="61efa58ed1445">
                    error
            </i>
        <span class="errorText"></span>
    </div>
</div>
@field(
    [
        'type' => 'range',
        'attributeList' => [
            'type' => 'range',
            'name' => 'rangeSlider',
        ]
    ])
@endfield

Color

error

<!-- field.blade.php -->

<div id="61efa58ed1669" class="c-field c-field__color c-field--md c-field--radius-md">

    
    <input id="input_61efa58ed1669"
           value=""
           type="color" name="colorPicker" aria-label="" data-uid="61efa58ed1675"
                      placeholder=""
    />
    <label class="c-field__text--placeholder">
        
    </label>

    <div id="error_input_61efa58ed1669_message" class="c-field__input-invalid-message">
        <!-- icon.blade.php -->
    <i id="61efa58ed16c0" class="c-icon c-icon--size-sm material-icons" translate="no" role="img" alt="" data-uid="61efa58ed16bc">
                    error
            </i>
        <span class="errorText"></span>
    </div>
</div>
@field(
    [
        'type' => 'color',
        'attributeList' => [
            'type' => 'color',
            'name' => 'colorPicker',
        ]
    ])
@endfield

Blade component parameters

Key Default value Type Available values Description
label string - Array of label items like labelText.
type text string - text, checkbox and radio
required false boolean - HTML5 validation on fields
autocomplete true boolean - Browser automatically completes the input values based on values that the user has entered before
value string - Field value
icon false boolean - Adds a icon before the input field.
size md string - -
radius md string - Rounded edges say you? (none, xs, sm, md, lg)
placeholder string - Example value for field
hideLabel false boolean - This will remove the visible label, it's still recommended to supply a label that will be used for labelling attributes
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.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Field/field.json