# Form Controls Settings

**Common fields**
| Field | Type | Description
| --- | --- | ---
| id | string | Unique identifier of the setting (e.g., "images", "title").
| label | object {ar,en} | Input label shown to the merchant.
| type | string | Input type (e.g., "text", "textarea", "image", "number", "color", "list").
| default | any | Default value when none is provided.
| icon | text | Optional reference to an icon (e.g. `fal fa-box`).

### Checkbox

```json
{
  "type": "checkbox",
  "id": "hide_dots",
  "label": {
    "ar": "إخفاء النقاط",
    "en": "Hide dots"
  },
  "default": true
}
```

### Checkboxes
**Extra fields**
| Field | Type | Description
| --- | --- | ---
| options | list[object] | Options to be displayed for the checkboxes. Each option needs to have a `value` and `label`.

```json
{
  "type": "checkboxes",
  "id": "options",
  "label": {
    "ar": "خيارات",
    "en": "Options"
  },
  "options": [
    {
      "value": "hide_search_bar",
      "label": {
        "ar": "إخفاء شريط البحث",
        "en": "Hide search bar"
      }
    },
    {
      "value": "hide_language",
      "label": {
         "ar": "إخفاء اللغة",
         "en": "Hide language"
      }
    }
  ]
}
```

### Radio
**Extra fields**
| Field | Type | Description
| --- | --- | ---
| options | list[object] | Options to be displayed for the radio. Each option needs to have a `value` and `label`.

```json
{
  "type": "radio",
  "id": "logo_aligment",
  "label": {
    "ar": "محاذاة الشعار",
    "en": "Logo alignment"
  },
  "options": [
    {
      "value": "left",
      "label": {
        "ar": "يسار",
        "en": "Left"
      }
    },
    {
      "value": "centered",
      "label": {
        "ar": "وسط",
        "en": "Centered"
      }
    }
  ],
  "default": "left"
}
```

### Range
**Extra fields**
| Field | Type | Description
| --- | --- | ---
| min | int | Minimum value for the range.
| max | int | Maximum value for the range.
| step | int | Increment/decrement value.
| unit | str | Unit of measurement to show (e.g. "px", "seconds", etc.).


```json
{
  "type": "range",
  "id": "font_size",
  "label": {
    "ar": "حجم النص",
    "en": "Font size"
  },
  "min": 12,
  "max": 24,
  "step": 1,
  "unit": "px",
  "default": 16
}
```

### Select
**Extra fields**
| Field | Type | Description
| --- | --- | ---
| options | list[object] | Options to be displayed for the radio. Each option needs to have a `value` and 
```json
{
  "type": "select",
  "id": "fonts",
  "label": {
        "ar": "اسم الخط",
        "en": "Font name"
  },
  "options": [
        {
        "value": "Changa",
        "label": {
            "ar": "Changa",
            "en": "Changa"
            }
        },
        {
        "value": "Cairo",
        "label": {
            "ar": "Cairo",
            "en": "Cairo"
            }
        }
    ]
}
```