# Fields & props

### Array

This is a bit more sophisticated field so we created a page with more details here:

{% content-ref url="fields/array" %}
[array](https://docs.tutim.io/api-reference/fields/array)
{% endcontent-ref %}

<img src="https://3527258519-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJW1wNmC313vP7hweP31e%2Fuploads%2Fgit-blob-4082944781c05a3904c21618aaa1444f1087e589%2Ffile.drawing%20(10).svg?alt=media" alt="" class="gitbook-drawing">

```typescript
interface FieldConfig {
  key: string;
  type: InputType.Array;
  children: { fields: FieldConfig[] };
  label?: string;
  isDisabled?: boolean;
  isRequired?: boolean;
  defaultValue?: any;
}
```

* `key`: A unique identifier for the field.
* `type`: The type of input to use for the field, as specified by the `InputType` enumeration.
* `children`: A nested set of fields for use with `InputType.Object` or `InputType.Array` fields.
* `label`: (optional) The label to display for the field.
* `isDisabled`: (optional) A boolean value indicating whether the field should be disabled.
* `isRequired`: (optional) A boolean value indicating whether the field is required.
* `defaultValue`: (optional) The default value for the field.

### Checkbox

<img src="https://3527258519-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJW1wNmC313vP7hweP31e%2Fuploads%2Fgit-blob-073fa122253ef1797cfb5d9514957a8c28601ce0%2Ffile.drawing%20(12).svg?alt=media" alt="" class="gitbook-drawing">

```typescript
interface FieldConfig {
  key: string;
  type: InputType.Checkbox;
  label?: string;
  isDisabled?: boolean;
  isRequired?: boolean;
  defaultValue?: any;
}
```

* `key`: A unique identifier for the field.
* `type`: The type of input to use for the field, as specified by the `InputType` enumeration.
* `label`: (optional) The label to display for the field.
* `isDisabled`: (optional) A boolean value indicating whether the field should be disabled.
* `isRequired`: (optional) A boolean value indicating whether the field is required.
* `defaultValue`: (optional) The default value for the field.

### Custom

This is a bit more sophisticated field so we created a page with more details here:

{% content-ref url="fields/customfield" %}
[customfield](https://docs.tutim.io/api-reference/fields/customfield)
{% endcontent-ref %}

```typescript
interface FieldConfig {
  key: string;
  type: InputType.Custom;
  Field: Field;
  label?: string;
  isDisabled?: boolean;
  isRequired?: boolean;
  defaultValue?: any;
  options?: Option[];
}
```

* `key`: A unique identifier for the field.
* `type`: The type of input to use for the field, as specified by the `InputType` enumeration.
* `Field`: Field component
* `label`: (optional) The label to display for the field.
* `isDisabled`: (optional) A boolean value indicating whether the field should be disabled.
* `isRequired`: (optional) A boolean value indicating whether the field is required.
* `defaultValue`: (optional) The default value for the field.
* `options`: (optional) An array of `Option` objects for use with `InputType.Select`, `InputType.Custom`and `InputType.Radio` fields.

### Date

<img src="https://3527258519-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJW1wNmC313vP7hweP31e%2Fuploads%2Fgit-blob-7972c0316f0376290b072f715f129500a32b8b42%2Ffile.drawing%20(3).svg?alt=media" alt="" class="gitbook-drawing">

```typescript
interface FieldConfig {
  key: string;
  type: InputType.Date;
  label?: string;
  isDisabled?: boolean;
  isRequired?: boolean;
  defaultValue?: any;
}
```

* `key`: A unique identifier for the field.
* `type`: The type of input to use for the field, as specified by the `InputType` enumeration.
* `label`: (optional) The label to display for the field.
* `isDisabled`: (optional) A boolean value indicating whether the field should be disabled.
* `isRequired`: (optional) A boolean value indicating whether the field is required.
* `defaultValue`: (optional) The default value for the field.

### Json

<img src="https://3527258519-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJW1wNmC313vP7hweP31e%2Fuploads%2Fgit-blob-47248aec4e8ddab84fddee65b398d15df5f10a96%2Ffile.drawing%20(9).svg?alt=media" alt="" class="gitbook-drawing">

```typescript
interface FieldConfig {
  key: string;
  type: InputType.Json;
  label?: string;
  isDisabled?: boolean;
  isRequired?: boolean;
  defaultValue?: any;
}
```

* `key`: A unique identifier for the field.
* `type`: The type of input to use for the field, as specified by the `InputType` enumeration.
* `label`: (optional) The label to display for the field.
* `isDisabled`: (optional) A boolean value indicating whether the field should be disabled.
* `isRequired`: (optional) A boolean value indicating whether the field is required.
* `defaultValue`: (optional) The default value for the field.

### MultiText

<img src="https://3527258519-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJW1wNmC313vP7hweP31e%2Fuploads%2Fgit-blob-821cc1224865cb191769832597236928e1dd15e0%2Ffile.drawing%20(7).svg?alt=media" alt="" class="gitbook-drawing">

```typescript
interface FieldConfig {
  key: string;
  type: InputType.MultiText;
  label?: string;
  isDisabled?: boolean;
  isRequired?: boolean;
  defaultValue?: any;
}
```

* `key`: A unique identifier for the field.
* `type`: The type of input to use for the field, as specified by the `InputType` enumeration.
* `label`: (optional) The label to display for the field.
* `isDisabled`: (optional) A boolean value indicating whether the field should be disabled.
* `isRequired`: (optional) A boolean value indicating whether the field is required.
* `defaultValue`: (optional) The default value for the field.

### Object

This is a bit more sophisticated field so we created a page with more details here:

{% content-ref url="fields/nested-children" %}
[nested-children](https://docs.tutim.io/api-reference/fields/nested-children)
{% endcontent-ref %}

<img src="https://3527258519-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJW1wNmC313vP7hweP31e%2Fuploads%2Fgit-blob-27e5d6530eff889ba4d5923f55086ae15333847b%2Ffile.drawing%20(8).svg?alt=media" alt="" class="gitbook-drawing">

```typescript
interface FieldConfig {
  key: string;
  type: InputType.Object;
  children: { fields: FieldConfig[] };
  label?: string;
  isDisabled?: boolean;
  isRequired?: boolean;
  defaultValue?: any;
}
```

* `key`: A unique identifier for the field.
* `type`: The type of input to use for the field, as specified by the `InputType` enumeration.
* `children`: A nested set of fields for use with `InputType.Object` or `InputType.Array` fields.
* `label`: (optional) The label to display for the field.
* `isDisabled`: (optional) A boolean value indicating whether the field should be disabled.
* `isRequired`: (optional) A boolean value indicating whether the field is required.
* `defaultValue`: (optional) The default value for the field.

### Number

<img src="https://3527258519-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJW1wNmC313vP7hweP31e%2Fuploads%2Fgit-blob-628eb83620ac3e7ecd80083d3b454b1d78d37ceb%2Ffile.drawing%20(2)%20(3).svg?alt=media" alt="" class="gitbook-drawing">

```typescript
interface FieldConfig {
  key: string;
  type: InputType.Number;
  label?: string;
  isDisabled?: boolean;
  isRequired?: boolean;
  defaultValue?: any;
}
```

* `key`: A unique identifier for the field.
* `type`: The type of input to use for the field, as specified by the `InputType` enumeration.
* `label`: (optional) The label to display for the field.
* `isDisabled`: (optional) A boolean value indicating whether the field should be disabled.
* `isRequired`: (optional) A boolean value indicating whether the field is required.
* `defaultValue`: (optional) The default value for the field.

### Password

<img src="https://3527258519-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJW1wNmC313vP7hweP31e%2Fuploads%2Fgit-blob-5cb30ffec0aaee13a8fb2dbfa189d553e7750a00%2Ffile.drawing%20(14).svg?alt=media" alt="" class="gitbook-drawing">

```typescript
interface FieldConfig {
  key: string;
  type: InputType.Password;
  label?: string;
  isDisabled?: boolean;
  isRequired?: boolean;
  defaultValue?: any;
}
```

* `key`: A unique identifier for the field.
* `type`: The type of input to use for the field, as specified by the `InputType` enumeration.
* `label`: (optional) The label to display for the field.
* `isDisabled`: (optional) A boolean value indicating whether the field should be disabled.
* `isRequired`: (optional) A boolean value indicating whether the field is required.
* `defaultValue`: (optional) The default value for the field.

### Radio

<img src="https://3527258519-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJW1wNmC313vP7hweP31e%2Fuploads%2Fgit-blob-b560a4f5610df7ffe53d3d94a95a2160f1bbf8e0%2Ffile.drawing.svg?alt=media" alt="" class="gitbook-drawing">

```typescript
interface FieldConfig {
  key: string;
  type: InputType.Radio;
  options: Option[];
  label?: string;
  isDisabled?: boolean;
  isRequired?: boolean;
  defaultValue?: any;
}
```

* `key`: A unique identifier for the field.
* `type`: The type of input to use for the field, as specified by the `InputType` enumeration.
* `options`: (optional) An array of `Option` objects for use with `InputType.Select`, `InputType.Custom`and `InputType.Radio` fields.
* `label`: (optional) The label to display for the field.
* `isDisabled`: (optional) A boolean value indicating whether the field should be disabled.
* `isRequired`: (optional) A boolean value indicating whether the field is required.
* `defaultValue`: (optional) The default value for the field.

### Select

Also known as Dropdown, Dropdown menu, or Dropdown list

<img src="https://3527258519-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJW1wNmC313vP7hweP31e%2Fuploads%2Fgit-blob-de448762218f0597ae9f152b91d18987748e7d55%2Ffile.drawing%20(11).svg?alt=media" alt="Select field with Tutim default visualization" class="gitbook-drawing">

```typescript
interface FieldConfig {
  key: string;
  type: InputType.Select;
  options: Option[];
  label?: string;
  isDisabled?: boolean;
  isRequired?: boolean;
  defaultValue?: any;
}
```

* `key`: A unique identifier for the field.
* `type`: The type of input to use for the field, as specified by the `InputType` enumeration.
* `options`: (optional) An array of `Option` objects for use with `InputType.Select`, `InputType.Custom`and `InputType.Radio` fields.
* `label`: (optional) The label to display for the field.
* `isDisabled`: (optional) A boolean value indicating whether the field should be disabled.
* `isRequired`: (optional) A boolean value indicating whether the field is required.
* `defaultValue`: (optional) The default value for the field.

### Switch

<img src="https://3527258519-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJW1wNmC313vP7hweP31e%2Fuploads%2Fgit-blob-37974e3d1c50150109fe920648388b9d59a5f0e4%2Ffile.drawing%20(6).svg?alt=media" alt="" class="gitbook-drawing">

```typescript
interface FieldConfig {
  key: string;
  type: InputType.Switch;
  label?: string;
  isDisabled?: boolean;
  isRequired?: boolean;
  defaultValue?: any;
}
```

* `key`: A unique identifier for the field.
* `type`: The type of input to use for the field, as specified by the `InputType` enumeration.
* `label`: (optional) The label to display for the field.
* `isDisabled`: (optional) A boolean value indicating whether the field should be disabled.
* `isRequired`: (optional) A boolean value indicating whether the field is required.
* `defaultValue`: (optional) The default value for the field.

### Text

<img src="https://3527258519-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJW1wNmC313vP7hweP31e%2Fuploads%2Fgit-blob-6937d271df8bd49a52b2b8d4fc3984016fbdaf30%2Ffile.drawing%20(4).svg?alt=media" alt="Text field with Tutim default visualization" class="gitbook-drawing">

```typescript
interface FieldConfig {
  key: string;
  type: InputType.Text;
  label?: string;
  isDisabled?: boolean;
  isRequired?: boolean;
  defaultValue?: any;
}
```

* `key`: A unique identifier for the field.
* `type`: The type of input to use for the field, as specified by the `InputType` enumeration.
* `label`: (optional) The label to display for the field.
* `isDisabled`: (optional) A boolean value indicating whether the field should be disabled.
* `isRequired`: (optional) A boolean value indicating whether the field is required.
* `defaultValue`: (optional) The default value for the field.

### TextArea

<img src="https://3527258519-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJW1wNmC313vP7hweP31e%2Fuploads%2Fgit-blob-dc4b003ff6f120663a0406c4b8e49b088a20e115%2Ffile.drawing%20(5).svg?alt=media" alt="" class="gitbook-drawing">

```typescript
interface FieldConfig {
  key: string;
  type: InputType.TextArea;
  label?: string;
  isDisabled?: boolean;
  isRequired?: boolean;
  defaultValue?: any;
}
```

* `key`: A unique identifier for the field.
* `type`: The type of input to use for the field, as specified by the `InputType` enumeration.
* `label`: (optional) The label to display for the field.
* `isDisabled`: (optional) A boolean value indicating whether the field should be disabled.
* `isRequired`: (optional) A boolean value indicating whether the field is required.
* `defaultValue`: (optional) The default value for the field.

###