Skip to main content

Form Field

About Form Fields​

The Form Fields are a wrapper components to decorate an input or select element with a label, help text, icon and/or error icon.

Examples​

Checkout the examples of Input and Select.

Group​

About Form Field Group​

A form field allows you to combine an input with a select. The input can be followed by are select or leaded by it.

Groups can only have an icon on the left if the input is the leading element or an icon on the right if the select is the leading element.

States​

Default​

Result
Loading...
Live Editor
<FormFieldGroup labelText="Price">
    <FormFieldGroupItem
        primary
        id="form-field-group-state-default-input1"
        labelText="Price"
    >
        <Input placeholder="0.00" />
    </FormFieldGroupItem>
    <FormFieldGroupItem
        id="form-field-group-state-default-input2"
    >
        <Select>
            <option>per day</option>
            <option>per week</option>
            <option>per month</option>
        </Select>
    </FormFieldGroupItem>
</FormFieldGroup>

Error​

Result
Loading...
Live Editor
<FormFieldGroup labelText="Price" hasError>
    <FormFieldGroupItem
        primary
        id="form-field-group-state-error-input1"
        labelText="Price"
    >
        <Input placeholder="0.00" />
    </FormFieldGroupItem>
    <FormFieldGroupItem
        id="form-field-group-state-error-input2"
    >
        <Select>
            <option>per day</option>
            <option>per week</option>
            <option>per month</option>
        </Select>
    </FormFieldGroupItem>
</FormFieldGroup>

Disabled​

Result
Loading...
Live Editor
<FormFieldGroup disabled labelText="Price">
    <FormFieldGroupItem
        primary
        id="form-field-group-state-disabled-input1"
        labelText="Price"
    >
        <Input placeholder="0.00" />
    </FormFieldGroupItem>
    <FormFieldGroupItem
        id="form-field-group-state-disabled-input2"
    >
        <Select>
            <option>per day</option>
            <option>per week</option>
            <option>per month</option>
        </Select>
    </FormFieldGroupItem>
</FormFieldGroup>

Examples​

Input before Select​

Result
Loading...
Live Editor
<FormFieldGroup labelText="Price">
    <FormFieldGroupItem
        primary
        id="form-field-group-example-input-before-select-input1"
        labelText="Price"
    >
        <Input placeholder="0.00" />
    </FormFieldGroupItem>
    <FormFieldGroupItem
        id="form-field-group-example-input-before-select-input2"
    >
        <Select>
            <option>per day</option>
            <option>per week</option>
            <option>per month</option>
        </Select>
    </FormFieldGroupItem>
</FormFieldGroup>

Assistive text​

Result
Loading...
Live Editor
<FormFieldGroup
    labelText="Price"
    helpText="Assitive text goes here"
>
    <FormFieldGroupItem
        primary
        id="form-field-group-example-assistive-text-input1"
        labelText="Price"
    >
        <Input placeholder="0.00" />
    </FormFieldGroupItem>
    <FormFieldGroupItem
        id="form-field-group-example-assistive-text-input2"
    >
        <Select>
            <option>per day</option>
            <option>per week</option>
            <option>per month</option>
        </Select>
    </FormFieldGroupItem>
</FormFieldGroup>

Input before Select – Icon on the left​

Result
Loading...
Live Editor
<FormFieldGroup
    labelText="Price"
    iconLeft={(
        <svg viewBox="0 0 24 24">
            <path
                fillRule="evenodd"
                d="M11.8155844,6.41558442 C11.1283117,6.41558442 10.5714286,6.97272727 10.5714286,7.65974026 C10.5714286,8.34675325 11.1283117,8.9038961 11.8155844,8.9038961 C12.5028571,8.9038961 13.0597403,8.34675325 13.0597403,7.65974026 C13.0597403,6.97272727 12.5028571,6.41558442 11.8155844,6.41558442 M12.8981818,10.5714286 L12.9090909,10.5714286 L12.9090909,16.5454545 L14.2727273,16.5454545 C14.6672727,16.5454545 14.987013,16.8361039 14.987013,17.1948052 C14.987013,17.5535065 14.6672727,17.8441558 14.2727273,17.8441558 L9.98701299,17.8441558 C9.59246753,17.8441558 9.27272727,17.5535065 9.27272727,17.1948052 C9.27272727,16.8361039 9.59246753,16.5454545 9.98701299,16.5454545 L11.6103896,16.5454545 L11.6103896,11.3506494 L10.6012987,11.3506494 C10.2979221,11.3506494 10.0519481,11.06 10.0519481,10.7012987 C10.0519481,10.3425974 10.2979221,10.0519481 10.6012987,10.0519481 L12.3597403,10.0519481 C12.6254545,10.0519481 12.8472727,10.2750649 12.8981818,10.5714286 M12,20.75 C7.17642045,20.75 3.25,16.8235795 3.25,12 C3.25,7.17642045 7.17642045,3.25 12,3.25 C16.8232955,3.25 20.75,7.17642045 20.75,12 C20.75,16.8235795 16.8232955,20.75 12,20.75 M12,2 C6.48,2 2,6.48 2,12 C2,17.52 6.48,22 12,22 C17.52,22 22,17.52 22,12 C22,6.48 17.52,2 12,2"
            />
        </svg>
    )}
>
    <FormFieldGroupItem
        primary
        id="form-field-group-example-input-before-select-icon-left-input1"
        labelText="Price"
    >
        <Input placeholder="0.00" />
    </FormFieldGroupItem>
    <FormFieldGroupItem
        id="form-field-group-example-input-before-select-icon-left-input1"
    >
        <Select>
            <option>per day</option>
            <option>per week</option>
            <option>per month</option>
        </Select>
    </FormFieldGroupItem>
</FormFieldGroup>

Input before Select – Error and icon on the left​

Result
Loading...
Live Editor
<FormFieldGroup
    labelText="Price"
    iconLeft={(
        <svg viewBox="0 0 24 24">
            <path
                fillRule="evenodd"
                d="M11.8155844,6.41558442 C11.1283117,6.41558442 10.5714286,6.97272727 10.5714286,7.65974026 C10.5714286,8.34675325 11.1283117,8.9038961 11.8155844,8.9038961 C12.5028571,8.9038961 13.0597403,8.34675325 13.0597403,7.65974026 C13.0597403,6.97272727 12.5028571,6.41558442 11.8155844,6.41558442 M12.8981818,10.5714286 L12.9090909,10.5714286 L12.9090909,16.5454545 L14.2727273,16.5454545 C14.6672727,16.5454545 14.987013,16.8361039 14.987013,17.1948052 C14.987013,17.5535065 14.6672727,17.8441558 14.2727273,17.8441558 L9.98701299,17.8441558 C9.59246753,17.8441558 9.27272727,17.5535065 9.27272727,17.1948052 C9.27272727,16.8361039 9.59246753,16.5454545 9.98701299,16.5454545 L11.6103896,16.5454545 L11.6103896,11.3506494 L10.6012987,11.3506494 C10.2979221,11.3506494 10.0519481,11.06 10.0519481,10.7012987 C10.0519481,10.3425974 10.2979221,10.0519481 10.6012987,10.0519481 L12.3597403,10.0519481 C12.6254545,10.0519481 12.8472727,10.2750649 12.8981818,10.5714286 M12,20.75 C7.17642045,20.75 3.25,16.8235795 3.25,12 C3.25,7.17642045 7.17642045,3.25 12,3.25 C16.8232955,3.25 20.75,7.17642045 20.75,12 C20.75,16.8235795 16.8232955,20.75 12,20.75 M12,2 C6.48,2 2,6.48 2,12 C2,17.52 6.48,22 12,22 C17.52,22 22,17.52 22,12 C22,6.48 17.52,2 12,2"
            />
        </svg>
    )}
    hasError
>
    <FormFieldGroupItem
        primary
        id="form-field-group-example-input-before-select-error-icon-icon-left-input1"
        labelText="Price"
    >
        <Input placeholder="0.00" />
    </FormFieldGroupItem>
    <FormFieldGroupItem
        id="form-field-group-example-input-before-select-error-icon-icon-left-input1"
    >
        <Select>
            <option>per day</option>
            <option>per week</option>
            <option>per month</option>
        </Select>
    </FormFieldGroupItem>
</FormFieldGroup>

Select before Input​

Result
Loading...
Live Editor
<FormFieldGroup labelText="Price">
    <FormFieldGroupItem
        id="form-field-group-example-select-before-input-input1"
    >
        <Select>
            <option>per day</option>
            <option>per week</option>
            <option>per month</option>
        </Select>
    </FormFieldGroupItem>
    <FormFieldGroupItem
        primary
        id="form-field-group-example-select-before-input-input2"
        labelText="Price"
    >
        <Input placeholder="0.00" />
    </FormFieldGroupItem>
</FormFieldGroup>

Select before Input – Icon button on the right​

Result
Loading...
Live Editor
<FormFieldGroup
    labelText="Price"
    iconRight={(
        <button>
            <svg viewBox="0 0 24 24">
                <path
                    fillRule="evenodd"
                    d="M21.5266667,10.77 C22.152837,11.4685042 22.1539136,12.5260557 21.5291667,13.2258333 C19.3483334,15.6258334 15.745,18.1666667 12.1225,18.1666667 L11.8658333,18.1666667 C8.25583331,18.1666667 4.65166663,15.6258334 2.47333329,13.2266667 C1.84775784,12.5272521 1.84775784,11.4694146 2.47333329,10.77 C4.67749996,8.34583332 8.33333331,5.7808333 12,5.8333333 C15.6666667,5.78166664 19.3225,8.34499998 21.5266667,10.77 Z M8.16666665,12 C8.16666665,14.1170916 9.88290845,15.8333334 12,15.8333334 C14.1170916,15.8333334 15.8333334,14.1170916 15.8333334,12 C15.8333334,9.88290845 14.1170916,8.16666665 12,8.16666665 C9.88290845,8.16666665 8.16666665,9.88290845 8.16666665,12 Z M12,13.6666667 C11.0795254,13.6666667 10.3333333,12.9204746 10.3333333,12 C10.3333333,11.0795254 11.0795254,10.3333333 12,10.3333333 C12.9204746,10.3333333 13.6666667,11.0795254 13.6666667,12 C13.6666667,12.9204746 12.9204746,13.6666667 12,13.6666667 Z"
                />
            </svg>
        </button>
    )}
>
    <FormFieldGroupItem
        id="form-field-group-example-select-before-input-icon-button-right-input1"
    >
        <Select>
            <option>per day</option>
            <option>per week</option>
            <option>per month</option>
        </Select>
    </FormFieldGroupItem>
    <FormFieldGroupItem
        primary
        id="form-field-group-example-select-before-input-icon-button-right-input2"
        labelText="Price"
    >
        <Input placeholder="0.00" />
    </FormFieldGroupItem>
</FormFieldGroup>

Select before Input – Icon on the left​

Result
Loading...
Live Editor
<FormFieldGroup
    labelText="Price"
    iconLeft={(
        <svg viewBox="0 0 24 24">
            <path
                fillRule="evenodd"
                d="M11.8155844,6.41558442 C11.1283117,6.41558442 10.5714286,6.97272727 10.5714286,7.65974026 C10.5714286,8.34675325 11.1283117,8.9038961 11.8155844,8.9038961 C12.5028571,8.9038961 13.0597403,8.34675325 13.0597403,7.65974026 C13.0597403,6.97272727 12.5028571,6.41558442 11.8155844,6.41558442 M12.8981818,10.5714286 L12.9090909,10.5714286 L12.9090909,16.5454545 L14.2727273,16.5454545 C14.6672727,16.5454545 14.987013,16.8361039 14.987013,17.1948052 C14.987013,17.5535065 14.6672727,17.8441558 14.2727273,17.8441558 L9.98701299,17.8441558 C9.59246753,17.8441558 9.27272727,17.5535065 9.27272727,17.1948052 C9.27272727,16.8361039 9.59246753,16.5454545 9.98701299,16.5454545 L11.6103896,16.5454545 L11.6103896,11.3506494 L10.6012987,11.3506494 C10.2979221,11.3506494 10.0519481,11.06 10.0519481,10.7012987 C10.0519481,10.3425974 10.2979221,10.0519481 10.6012987,10.0519481 L12.3597403,10.0519481 C12.6254545,10.0519481 12.8472727,10.2750649 12.8981818,10.5714286 M12,20.75 C7.17642045,20.75 3.25,16.8235795 3.25,12 C3.25,7.17642045 7.17642045,3.25 12,3.25 C16.8232955,3.25 20.75,7.17642045 20.75,12 C20.75,16.8235795 16.8232955,20.75 12,20.75 M12,2 C6.48,2 2,6.48 2,12 C2,17.52 6.48,22 12,22 C17.52,22 22,17.52 22,12 C22,6.48 17.52,2 12,2"
            />
        </svg>
    )}
>
    <FormFieldGroupItem
        id="form-field-group-example-select-before-input-icon-left-input1"
    >
        <Select>
            <option>per day</option>
            <option>per week</option>
            <option>per month</option>
        </Select>
    </FormFieldGroupItem>
    <FormFieldGroupItem
        primary
        id="form-field-group-example-select-before-input-icon-left-input2"
        labelText="Price"
    >
        <Input placeholder="0.00" />
    </FormFieldGroupItem>
</FormFieldGroup>

Select before Input – Error and icon button on the right​

Result
Loading...
Live Editor
<FormFieldGroup
    labelText="Price"
    iconRight={(
        <button>
            <svg viewBox="0 0 24 24">
                <path
                    fillRule="evenodd"
                    d="M21.5266667,10.77 C22.152837,11.4685042 22.1539136,12.5260557 21.5291667,13.2258333 C19.3483334,15.6258334 15.745,18.1666667 12.1225,18.1666667 L11.8658333,18.1666667 C8.25583331,18.1666667 4.65166663,15.6258334 2.47333329,13.2266667 C1.84775784,12.5272521 1.84775784,11.4694146 2.47333329,10.77 C4.67749996,8.34583332 8.33333331,5.7808333 12,5.8333333 C15.6666667,5.78166664 19.3225,8.34499998 21.5266667,10.77 Z M8.16666665,12 C8.16666665,14.1170916 9.88290845,15.8333334 12,15.8333334 C14.1170916,15.8333334 15.8333334,14.1170916 15.8333334,12 C15.8333334,9.88290845 14.1170916,8.16666665 12,8.16666665 C9.88290845,8.16666665 8.16666665,9.88290845 8.16666665,12 Z M12,13.6666667 C11.0795254,13.6666667 10.3333333,12.9204746 10.3333333,12 C10.3333333,11.0795254 11.0795254,10.3333333 12,10.3333333 C12.9204746,10.3333333 13.6666667,11.0795254 13.6666667,12 C13.6666667,12.9204746 12.9204746,13.6666667 12,13.6666667 Z"
                />
            </svg>
        </button>
    )}
    hasError
>
    <FormFieldGroupItem
        id="form-field-group-example-select-before-input-error-icon-icon-button-right-input1"
    >
        <Select>
            <option>per day</option>
            <option>per week</option>
            <option>per month</option>
        </Select>
    </FormFieldGroupItem>
    <FormFieldGroupItem
        primary
        id="form-field-group-example-select-before-input-error-icon-icon-button-right-input2"
        labelText="Price"
    >
        <Input placeholder="0.00" />
    </FormFieldGroupItem>
</FormFieldGroup>