Field

Displays different type of form fields.

Text

Different text fields.

Input field - E-mail

error_outline

Input field - Date Picker


Notice: Undefined index: required in /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Field/Field.php on line 90
error_outline

Input field - Number

error_outline

Input field - Password

error_outline

Input field - Search (with icon)

search error_outline

Input field - Text

error_outline
<!-- form.blade.php -->
<form id="62bec91699d99" class="c-form" autocomplete="on" data-uid="62bec91699d95" method="POST" action="#">
    <div class="grid">
                <div class="grid-md-6">
                    <h2>Input field - E-mail</h2>
                    <!-- field.blade.php -->
<div class="c-field c-field--text c-field--md c-field--radius-md c-field--md c-field--radius-md" id="62bec916992c1">
            <label class="c-field__label" for="input_62bec916992c1" id="label_62bec916992c1">
            Add your E-mail
                            <span class="u-color__text--danger">*</span></label>
                    </label>
        
    <div class="c-field__inner c-field__inner--text">
                                
            <input id="input_62bec916992c1"
                type="text"
                value=""
                type="email" name="email" pattern="^[^@]+@[^@]+\.[^@]+$" autocomplete="e-mail" data-invalid-message="You need to add a valid E-mail!" aria-labelledby="label_62bec916992c1" data-uid="62bec916992d7"
                                    required
                    data-required="1"
                    aria-required="true"
                                placeholder="email@email.com"
            />

                        
            <i class="c-icon c-field__suffix material-icons c-field__error-icon" translate="no" role="img">error_outline</i>
            </div>
    </div>
                </div>

                <div class="grid-md-6">
                    <h2>Input field - Date Picker</h2>
                    <br />
<b>Notice</b>:  Undefined index: required in <b>/mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Field/Field.php</b> on line <b>90</b><br />
<!-- field.blade.php -->
<div class="c-field c-field--date c-field--md c-field--radius-md c-field--md c-field--radius-md" id="62bec91699778">
            <label class="c-field__label" for="input_62bec91699778" id="label_62bec91699778">
            Enter a date
                            <span class="u-color__text--danger">*</span></label>
                    </label>
        
    <div class="c-field__inner c-field__inner--date">
                                
            <input id="input_62bec91699778"
                type="date"
                value=""
                type="text" name="text" data-invalid-message="You need to add a valid date!" aria-labelledby="label_62bec91699778" min="1997-06-29" max="2022-07-02" data-uid="62bec91699a65"
                                    required
                    data-required="1"
                    aria-required="true"
                                placeholder=""
            />

                        
            <i class="c-icon c-field__suffix material-icons c-field__error-icon" translate="no" role="img">error_outline</i>
            </div>
    </div>
                </div>

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

                    <h2>Input field - Number</h2>
                    <!-- field.blade.php -->
<div class="c-field c-field--text c-field--md c-field--radius-md c-field--md c-field--radius-md" id="62bec91699afb">
            <label class="c-field__label" for="input_62bec91699afb" id="label_62bec91699afb">
            Number
                    </label>
        
    <div class="c-field__inner c-field__inner--text">
                                
            <input id="input_62bec91699afb"
                type="text"
                value=""
                type="number" name="number" required="1" data-invalid-message="Must be a number " aria-labelledby="label_62bec91699afb" data-uid="62bec91699b06"
                                placeholder=""
            />

                        
            <i class="c-icon c-field__suffix material-icons c-field__error-icon" translate="no" role="img">error_outline</i>
            </div>
    </div>
                </div>
                <div class="grid-md-6">

                    <h2>Input field - Password</h2>
                    <!-- field.blade.php -->
<div class="c-field c-field--text c-field--md c-field--radius-md c-field--md c-field--radius-md" id="62bec91699b64">
            <label class="c-field__label" for="input_62bec91699b64" id="label_62bec91699b64">
            Set your password
                    </label>
        
    <div class="c-field__inner c-field__inner--text">
                                
            <input id="input_62bec91699b64"
                type="text"
                value=""
                type="password" name="password" required="1" autocomplete="new-password" aria-labelledby="label_62bec91699b64" data-uid="62bec91699b6e"
                                placeholder=""
            />

                        
            <i class="c-icon c-field__suffix material-icons c-field__error-icon" translate="no" role="img">error_outline</i>
            </div>
    </div>
                </div>

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

                    <h2>Input field - Search (with icon)</h2>
                    <!-- field.blade.php -->
<div class="c-field c-field--text c-field--icon c-field--md c-field--radius-md c-field--md c-field--radius-md" id="62bec91699bc3">
            <label class="c-field__label" for="input_62bec91699bc3" id="label_62bec91699bc3">
            Search
                    </label>
        
    <div class="c-field__inner c-field__inner--text">
                                    <!-- icon.blade.php -->
    <i id="62bec91699c5e" class="c-icon c-field__icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62bec91699c5a">
                    search
            </i>
                        
            <input id="input_62bec91699bc3"
                type="text"
                value=""
                type="search" name="search" required="1" aria-labelledby="label_62bec91699bc3" data-uid="62bec91699bce"
                                placeholder=""
            />

                        
            <i class="c-icon c-field__suffix material-icons c-field__error-icon" translate="no" role="img">error_outline</i>
            </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 c-field--md c-field--radius-md" id="62bec91699d08">
            <label class="c-field__label" for="input_62bec91699d08" id="label_62bec91699d08">
            Normal text field
                    </label>
        
    <div class="c-field__inner c-field__inner--text">
                                
            <input id="input_62bec91699d08"
                type="text"
                value=""
                type="text" name="text" aria-labelledby="label_62bec91699d08" data-uid="62bec91699d15"
                                placeholder=""
            />

                        
            <i class="c-icon c-field__suffix material-icons c-field__error-icon" translate="no" role="img">error_outline</i>
            </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' => 'date',
                        'value' => '',
                        'label' => 'Enter a date',
                        'attributeList' => [
                            'type' => 'text',
                            'name' => 'text',
                            'data-invalid-message' => "You need to add a valid date!",
                        ],
                        'required' => true,
                        'datepicker' => [
                            'minDate'               => "6/29/1997",
                            'maxDate'               => "tomorrow",
                        ]
                    ])
                    @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_outline
<!-- field.blade.php -->
<div class="c-field c-field--range c-field--md c-field--radius-md c-field--md c-field--radius-md" id="62bec9169a24e">
        
    <div class="c-field__inner c-field__inner--range">
                                
            <input id="input_62bec9169a24e"
                type="range"
                value=""
                type="range" name="rangeSlider" aria-label="" data-uid="62bec9169a25e"
                                placeholder=""
            />

                        
            <i class="c-icon c-field__suffix material-icons c-field__error-icon" translate="no" role="img">error_outline</i>
            </div>
    </div>
@field(
    [
        'type' => 'range',
        'attributeList' => [
            'type' => 'range',
            'name' => 'rangeSlider',
        ]
    ])
@endfield

Color

error_outline
<!-- field.blade.php -->
<div class="c-field c-field--color c-field--md c-field--radius-md c-field--md c-field--radius-md" id="62bec9169a4db">
        
    <div class="c-field__inner c-field__inner--color">
                                
            <input id="input_62bec9169a4db"
                type="color"
                value=""
                type="color" name="colorPicker" aria-label="" data-uid="62bec9169a4e9"
                                placeholder=""
            />

                        
            <i class="c-icon c-field__suffix material-icons c-field__error-icon" translate="no" role="img">error_outline</i>
            </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
helperText string - Text displayed in the bottom (can be used for explainers or error messages
multiline false boolean - Render textarea instead of input
borderless false boolean - Removes the border around the input 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.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Field/field.json