# custom\_selector

<figure><img src="https://2798932742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKBGfOeYOvP45qYmu7SWy%2Fuploads%2FbcYcjxucjWmAuEdUD5Sj%2Fimage.png?alt=media&#x26;token=4ab2dd30-b1ee-48da-8cf4-3565527fb1ad" alt=""><figcaption><p>custom selector with 4 options showing the name of the options</p></figcaption></figure>

<figure><img src="https://2798932742-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKBGfOeYOvP45qYmu7SWy%2Fuploads%2FPNctZwex0b7K1cG2Sp7H%2Fimage.png?alt=media&#x26;token=bf95235c-3d96-4b4e-9ca7-9574e940794a" alt=""><figcaption><p>Custom selector with 5 options, showing icons</p></figcaption></figure>

<table data-header-hidden><thead><tr><th width="118"></th><th width="113"></th><th width="93"></th><th></th></tr></thead><tbody><tr><td><strong>Name</strong></td><td><strong>Type</strong></td><td><strong>Default</strong></td><td><strong>Description</strong></td></tr><tr><td>columns</td><td>Number</td><td></td><td>The property allows multiple number types. Example:<br><code>'columns'     => 2,</code></td></tr><tr><td>options</td><td>Array</td><td></td><td><p>Supported properties are:<br>id<br>name<br>icon<br></p><pre><code>$options->add_option(
  'show_user',
    [
	'type'        => 'custom_selector',
	'title'       => __( 'Show user?', 'zionbuilder' ),	
	'columns'     => 2,
	'options'     => [
	[
	  'name' => __( 'Yes', 'zionbuilder' ),
	   'id'   => true,
	],
	[
	  'name' => __( 'No', 'zionbuilder' ),
	  'id'   => false,
	],
  ],
]
);
</code></pre><p>The options support also icon property instead of name</p><pre><code>$options->add_option(
'inner_content_row_alignment_horizontal',
[
'type'                    => 'custom_selector',
'description'             => esc_html__( 'Inner content horizontal alignment layout', 'zionbuilder' ),
'title'                   => esc_html__( 'Inner content horizontal alignment', 'zionbuilder' ),
'options'                 => [
[
  'name' => __( 'Left', 'zionbuilder' ),
  'id'   => 'flex-start',
  'icon' => 'justify-start',
],
[
  'name' => __( 'center', 'zionbuilder' ),
  'id'   => 'center',
  'icon' => 'justify-center',
],
[	
  'name' => __( 'Right', 'zionbuilder' ),
  'id'   => 'flex-end',
  'icon' => 'justify-end',
],
[
  'name' => __( 'space-between', 'zionbuilder' ),
  'id'   => 'space-between',
  'icon' => 'justify-sp-btw',
],
[
  'name' => __( 'space-around', 'zionbuilder' ),
  'id'   => 'space-around',
  'icon' => 'justify-sp-around',
],
],
);
</code></pre></td></tr><tr><td>textIcon</td><td>Boolean</td><td></td><td>The property shows both icon and name</td></tr></tbody></table>

Below is the following example of how the option can be used:

```
$options->add_option(
            'option_name',
            [
                'type'        => 'custom_selector',
                'title'       => __( 'Title', 'zionbuilder' ),
                'layout'      => 'inline',           
                'columns'     => 2,
                'options'     => [
                    [
                        'name' => __( 'Yes', 'zionbuilder' ),
                        'id'   => true,
                    ],
                    [
                        'name' => __( 'No', 'zionbuilder' ),
                        'id'   => false,
                    ],
                ],
            ]
        );
```
