# Field element declaration

Learn more about field element properties, supported FieldExtensionType enumeration values, FieldExtensionFeature enumeration, and field configuration.

## Field element properties

| Key           | Type                                                                                                                    | Description                                                                                                                  |
| ------------- | ----------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| `name`        | `String`                                                                                                                | Name of the field element                                                                                                    |
| `apiId`       | `String`                                                                                                                | API ID of the field element                                                                                                  |
| `type`        | `field` (required)                                                                                                      | The type of element                                                                                                          |
| `features`    | [`[FieldExtensionFeature]`](https://hygraph.com/docs/app-framework/field-element/declaration#fieldextensionfeature-enumeration) (required) | List of features implemented by the element (at least one)                                                                   |
| `fieldType`   | [`FieldExtensionType`](https://hygraph.com/docs/app-framework/field-element/declaration#fieldextensiontype-enumeration) (required)         | What field type is your app element targeting                                                                                |
| `url`         | `String`                                                                                                                | URL of the field element                                                                                                     |
| `description` | `String`                                                                                                                | Description of the field element                                                                                             |
| `fieldConfig` | `ConfigFields`                                                                                                          | Optional definition of _field_ configuration settings. Supports the following field types: `string`, `number`, and `boolean` |

## FieldExtensionType enumeration

Supported `FieldExtensionType` enumeration values:

| Type          | `value` type                                                                                                                     |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| `STRING`      | `string`. A text field supporting plain strings.                                                                                 |
| `INT`         | `number` (without decimals). A numeric field for whole numbers (integers).                                                       |
| `FLOAT`       | `number`. A numeric field that supports decimal values.                                                                          |
| `BOOLEAN`     | `boolean`. A true/false field type.                                                                                              |
| `JSON`        | Any valid [JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) value                    |
| `DATE`        | `string` in format 'yyyy-MM-dd'                                                                                                  |
| `DATETIME`    | `string` in [ISO 8601 format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString) |
| `LOCATION`    | A field for geographic coordinates (latitude/longitude). `object { "latitude": number; "longitude": number; }`                   |
| `COLOR`       | An RGBA color value. `object { "rgba": { "r": number; "g": number; "b": number; "a": number; } }`                                |
| `RICHTEXT`    | `object`. Formatted text, embedded media, and links.                                                                             |
| `ENUMERATION` | `string`. A predefined set of selectable values (e.g., dropdown options).                                                        |
| `ID`          | `string`. A unique identifier for fields or entries, typically system-generated.                                                 |
| `RELATION`    | `object`. A field that defines a relationship between different models or entries.                                               |
| `UNION`       | `object`. A type of reference field that allows referencing multiple models.                                                     |

## FieldExtensionFeature enumeration

- `FieldRenderer`: The element replaces a form field.
- [`ListRenderer`](https://hygraph.com/docs/app-framework/field-element/list-renderer): By enabling this feature, you indicate
  that the element can handle array values as well, and that Hygraph should call
  it directly instead of the default list renderer on multiple value inputs.
- [`TableRenderer`](https://hygraph.com/docs/app-framework/field-element/table-renderer): The element should also be used to display values in the content table.

## Field configuration

This is an example for the `JSON` object for the field configuration:

```json
{
  "CUSTOM_COLORS": {
    "type": "string",
    "description": "Enter color options to display, separated by comma. E.g.: #fff, #f00, #0f0",
    "displayName": "Colors"
  }
}
```

According to this example, when the form is rendered, it will render a field called `CUSTOM_COLORS` of type `string`, with the display name **"Colors"**, and the description **"Enter color options to display, separated by a comma. E.g.: #fff, #f00, #0f0"**.

This information will be sent as metadata to the app element, and will display in the schema editor - as part of the custom field that it was configured for - and users will be able to add it to their models.

The schema view of the above example would look like this:

![fieldConfig example - Field](https://hygraph.com/images/docs/app-framework/app-framework-fieldConfig-field.png)

To later retrieve this information, you can do this:

```js
// Reading config data in Field Extension
function FieldElement() {
  const {
    extension: { fieldConfig },
  } = useFieldExtension();
  const colorsConfig = fieldConfig?.colors;

  return <div>{colorsConfig}</div>;
}
```