# Image radio

Image radio field renders a set of radio buttons with images as labels. Supports initial [`checked` or `disabled` attributes](#checked-and-disabled).

## Example configuration

```php
...
array(
    'title' => 'My image radio field title',
    'id' => 'image-radio-option',
    'desc' => 'Short description for the field',
    'tab' => 'main',
    'type' => 'image-radio',
    'choices' => array(
        array(
            'value' => 'First val',
            'image' => 'path/to/image-one.png',
        ),
        array(
            'value' => 'Second val',
            'image' => 'path/to/image-two.png',
        ),
        array(
            'value' => 'Third val',
            'image' => 'path/to/image-three.png',
        ),
    ),
),
...
```

This will produce the following

![](https://2294767099-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LKMTiOPVR7pXWhebz7q%2F-LKMTkyQru4k2zJzTpdQ%2F-LKMTqYj3tuMDPMP-fQ1%2Fimage-radio-one.png?generation=1534771031542131\&alt=media)

## `checked` and `disabled`

If `checked` or `disabled` keys are specified, they'll be respected. E.g:

```php
...
'choices' => array(
    array(
        'value' => 'First val',
        'image' => 'path/to/image-one.png',
    ),
    array(
        'value' => 'Second val',
        'image' => 'path/to/image-two.png',
        'checked' => true,
    ),
    array(
        'value' => 'Third val',
        'image' => 'path/to/image-three.png',
        'disabled' => true,
    ),
)
...
```

will result in the following

![](https://2294767099-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LKMTiOPVR7pXWhebz7q%2F-LKMTkyQru4k2zJzTpdQ%2F-LKMTqYlluyObnfgJzQM%2Fimage-radio-two.png?generation=1534771031589263\&alt=media)

Notice that the second option is checked on initial page load and the third option is not checkable.

## Params

| Name      | Type   | Description                                                                                                                                                                        |
| --------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `type`    | string | `radio` **(required)**                                                                                                                                                             |
| `id`      | string | Unique ID that will be used to retrieve the value **(required)**                                                                                                                   |
| `tab`     | string | Specifies in which tab this option will be rendered                                                                                                                                |
| `title`   | string | Shows a heading to the left of the field                                                                                                                                           |
| `desc`    | string | Shows a description text (can have HTML)                                                                                                                                           |
| `choices` | array  | Kind of required, but will not render anything if no choices are provided. Must be an array of arrays with `value` and `image` keys. See [examples](#example-configuration) above. |