# @6dui/6d-field-items

> 6d-field-items library.Uses different 6d fields installed internally

Latest version **1.0.1** (published 2023-04-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install @6dui/6d-field-items
pnpm add @6dui/6d-field-items
yarn add @6dui/6d-field-items
bun add @6dui/6d-field-items
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2023-04-25 |
| First published | 2023-04-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 14 |
| Unpacked size | 34.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Charisma.K.Salim |
| Maintainers | reneeshpas, emmanuel.mathew, charisma.kattanganal.salim |

## Links

- npm: https://www.npmjs.com/package/@6dui/6d-field-items
- npm.io page: https://npm.io/package/@6dui/6d-field-items

## Dependencies (14)

- [react](https://npm.io/package/react.md) ^17.0.2
- [eslint](https://npm.io/package/eslint.md) ^8.38.0
- [babel-cli](https://npm.io/package/babel-cli.md) ^6.26.0
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [babel-core](https://npm.io/package/babel-core.md) ^6.26.3
- [reactstrap](https://npm.io/package/reactstrap.md) ^9.1.9
- [eslint-watch](https://npm.io/package/eslint-watch.md) ^8.0.0
- [react-scripts](https://npm.io/package/react-scripts.md) ^5.0.1
- [babel-preset-env](https://npm.io/package/babel-preset-env.md) ^1.7.0
- [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.24.1
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) ^7.32.2
- [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) ^2.27.5
- [eslint-plugin-jsx-a11y](https://npm.io/package/eslint-plugin-jsx-a11y.md) ^6.7.1
- [babel-plugin-transform-object-rest-spread](https://npm.io/package/babel-plugin-transform-object-rest-spread.md) ^6.26.0

## Recent versions

- 1.0.1 (latest) — 2023-04-25
- 1.0.0 — 2023-04-25

## README

# 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
|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
```javascript
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
<img src="screenShots/NormalTextBox.PNG" alt="Output" />

---
_Source: https://npm.io/package/@6dui/6d-field-items · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._