# DataEntryField

Placeholder component for declarative field definition. This component doesn't render anything - it's only used to extract props in the parent DataEntryForm component.

## Installation

```tsx
import { DataEntryField } from 'uxp/components';
```

## Signature

```tsx
const DataEntryField: React.FunctionComponent<DataEntryFieldProps>
```

## Examples

```tsx
tsx
<DataEntryField
  field="email"
  title="Email Address"
  type="email"
  icon="fas at"
  required
  validate={async (val) => ({
    valid: val.includes('@'),
    error: 'Invalid email'
  })}
/>
```

## Properties

| Name                | Type                                                                                                                                                                                 | Mandatory | Default Value | Example Value |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------- | ------------- | ------------- |
| field               | string                                                                                                                                                                               | Yes       | -             | -             |
| title               | string                                                                                                                                                                               | Yes       | -             | -             |
| type                | 'text' \| 'password' \| 'number' \| 'email' \| 'checkbox' \| 'toggle' \| 'select' \| 'date' \| 'time' \| 'datetime' \| 'daterange' \| 'hidden' \| 'textarea' \| 'json' \| 'readonly' | No        | 'text'        | -             |
| value               | [FormValue](https://help.iviva.com/uxp/v5/additional-resources/types/formvalue)                                                                                                      | No        | -             | -             |
| placeholder         | string                                                                                                                                                                               | No        | -             | -             |
| icon                | string                                                                                                                                                                               | No        | -             | -             |
| children            | (data: IFormData, onChange: (value: any) => void) => React.ReactNode                                                                                                                 | No        | -             | -             |
| show                | (data: IFormData) => boolean                                                                                                                                                         | No        | -             | -             |
| options             | Array<{ label: string \| number; value: string \| number }> \| Array                                                                                                                 | No        | -             | -             |
| getOptions          | (data: IFormData) => (Array<{ label: string \| number; value: string \| number }> \| Array)                                                                                          | No        | -             | -             |
| getPaginatedOptions | ( data: IFormData, max: number, lastPageToken: string, args?: any ) => Promise<{ items: Array; pageToken: string; total?: number }>                                                  | No        | -             | -             |
| selectedOptionLabel | string \| ((data: IFormData, selected: string) => Promise)                                                                                                                           | No        | -             | -             |
| labelField          | string                                                                                                                                                                               | No        | 'label'       | -             |
| valueField          | string                                                                                                                                                                               | No        | 'value'       | -             |
| allowZero           | boolean                                                                                                                                                                              | No        | false         | -             |
| allowNegative       | boolean                                                                                                                                                                              | No        | false         | -             |
| formatter           | (value: any) => any                                                                                                                                                                  | No        | -             | -             |
| required            | boolean                                                                                                                                                                              | No        | false         | -             |
| allowEmptyString    | boolean                                                                                                                                                                              | No        | false         | -             |
| minLength           | number                                                                                                                                                                               | No        | -             | -             |
| maxLength           | number                                                                                                                                                                               | No        | -             | -             |
| regExp              | RegExp                                                                                                                                                                               | No        | -             | -             |
| minVal              | number                                                                                                                                                                               | No        | -             | -             |
| maxVal              | number                                                                                                                                                                               | No        | -             | -             |
| validate            | (value: any, data: IFormData) => CustomValidateResponse \| Promise                                                                                                                   | No        | -             | -             |

## Related Types

* [DataEntryFieldProps](https://help.iviva.com/uxp/v5/additional-resources/types/dataentryfieldprops)
* [FormValue](https://help.iviva.com/uxp/v5/additional-resources/types/formvalue)
* [IFormData](https://help.iviva.com/uxp/v5/additional-resources/types/iformdata)
* [CustomValidateResponse](https://help.iviva.com/uxp/v5/additional-resources/types/customvalidateresponse)