@6dui/6d-field-items
v1.0.1
Published
6d-field-items library.Uses different 6d fields installed internally
Downloads
8
Keywords
Readme
6d Field Items
Contains Different Form Fields. Supports bootstrap grid.
Installation
Table of Contents
- Textbox
- Dropdown
- DatePicker
- DateRangePicker
- CheckBox
- RadioButton
- FileUpload
- ToggleSwitch
Text box
Normal input box
Properties
|Property | Type | Default | Description |
| ------------ | ------------ | ------------ | ------------ |
| type | String | FIELD_TYPES.TEXT or '0' | Defines type of field|
|onChange | function
|undefined | On change function is passed |
| value | any |undefined | value of the field |
| disabled | boolean
| false |If passed true , the field will be disabled |
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}
/>