@6dui/6d-field-items v1.0.1

6d Field Items

Contains Different Form Fields. Supports bootstrap grid.

Installation

Table of Contents 1. Textbox 2. Dropdown 3. DatePicker 4. DateRangePicker 5. CheckBox 6. RadioButton 7. FileUpload 8. ToggleSwitch

Text box

Normal input box

Properties

Usecases

Normal textbox

Sample code

const FORM_ELEMENTS = {
    textBox: {
        name: "textBox",
        placeholder: "Text Box",
        label: "Text Box",
        width: "xs",
        ismandatory: true,
        validations: [
            {
                "validatorName": "minLength",
                "value": 2,
                "message": "profile.msisdn.minlength"//key from messages.json or direct value can be passed here
            },
            {
                "validatorName": "maxLength",
                "value": 4,
                "message": "profile.msisdn.maxlength"//key from messages.json or direct value can be passed here
            },
            {
                "validatorName": "regex",
                "value": /^[0-9]*$/,
                "message": "profile.msisdn.regex"//key from messages.json or direct value can be passed here
            },
            {
                "validatorName": "ismandatory",
                "value": true,
                "message": "profile.msisdn.ismandatory"//key from messages.json or direct value can be passed here
            }
        ]

    },
}


<FieldItem
            {...FORM_ELEMENTS.textBox}
            value={values.textBox}
            type={FIELD_TYPES.TEXT}
            onChange={(...e) => handleChange(FORM_ELEMENTS.textBox.name, ...e)}
            touched={fields.textBox && fields.textBox.hasError}
            error={fields.textBox && fields.textBox.errorMsg}
        />

Output