# Default options structure

Every option has the following default arguments:

<table data-header-hidden><thead><tr><th width="142"></th><th width="110"></th><th width="105"></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>type *</td><td>String</td><td></td><td>Name of the vue component</td></tr><tr><td>description</td><td>String</td><td></td><td>Text that appears on popup explaining what the option does.</td></tr><tr><td>title *</td><td>String</td><td></td><td>Text that displays as a title above the option</td></tr></tbody></table>

\* Mandatory argument

They also support the following arguments which are optional:

<table data-header-hidden><thead><tr><th width="100"></th><th width="96"></th><th width="91"></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>default</td><td>String / Boolean / Array</td><td></td><td>The default value of the option</td></tr><tr><td>css_style</td><td>Array</td><td></td><td><p>Adds css style to an element component<br></p><pre><code>$options->add_option(
            'title_color',
            [
                'type'      => 'colorpicker',
                'width'     => 50,
                'title'     => __( 'Title color', 'zionbuilder' ),
                'css_style' => [
                    [
                        'selector' => '{{ELEMENT}} .zb-el-alert__title',
                        'value'    => 'color: {{VALUE}}',
                    ],
                ],
            ]
        );
</code></pre><p><br></p></td></tr><tr><td>sync</td><td>String</td><td></td><td><p>It creates the synchronicity with the correspondent option from Styling.<br>Ex:<br></p><pre><code>$options->add_option(
            'title_color',
            [
                'type'      => 'colorpicker',
                'width'     => 50,
                'title'     => __( 'Title color', 'zionbuilder' ),
                'sync' => '_styles.wrapper.styles.%%RESPONSIVE_DEVICE%%.default.align-items'
            ]
        );
</code></pre><p><br></p></td></tr><tr><td>render_attribute</td><td>Array</td><td></td><td><p>Renders an attribute on the element component such as class name<br></p><pre><code>$options->add_option(
            'size',
            [
                'type'      => 'column_size',               
                'title'     => __( 'Select size', 'zionbuilder' ),
				'options'            => [
					[
						'id'   => 6,
						'name' => 2,
					],
				],
		'responsive_options' => true,
                'render_attribute'   => [
					[
					'tag_id'    => 'wrapper',
					'attribute' => 'class',
					'value'     => 'class--{{RESPONSIVE_DEVICE_CSS}}-{{VALUE}}',
					],
				]
            ]
        );
</code></pre></td></tr><tr><td>responsive_options</td><td>Boolean</td><td>false</td><td>Conditions if the option should render the element with responsive media queries</td></tr><tr><td>show_responsive_buttons</td><td>Boolean</td><td>false</td><td>Shows the responsive button if enabled</td></tr><tr><td>layout</td><td>String</td><td>‘full’</td><td>Controls the layout of the option :<br>‘full’<br>‘full-reverse’<br>‘inline’</td></tr><tr><td>width</td><td>Number</td><td>100</td><td>The percentage width of the option</td></tr><tr><td>dependency</td><td>Array</td><td></td><td><p>Conditions the current option to render only if other option has a property enabled. It supports multiple dependencies.<br></p><pre><code>$options->add_option(
     'size',
        [
        'type'      => 'column_size',               
        'title'     => __( 'Select size', 'zionbuilder' ),
	'options'   => [
			[
			'id'   => 6,
			'name' => 2,
		],
	],				
         'dependency'  => [
		[
		'option'      => 'option_id',
		'value'       => ['style--1', 'style--2', 'style--3'],
		],
	],
        ]
        );
</code></pre></td></tr><tr><td>dynamic</td><td>Array</td><td></td><td><p>If enabled, shows the dynamic input fields</p><pre><code>$options->add_option(
	'text',
	array(
	'type'        => 'editor',
	'title'       => esc_html__( 'Element text', 'zionbuilder' ),
	'description' => esc_html__( 'Set the desired title', 'zionbuilder' ),
	'dynamic'     => array(
			'enabled' => true,
			),
		)
		);
</code></pre></td></tr></tbody></table>

The code would look something like:

```
public function options( $options ) {
        $options->add_option(
            'option_id',
             [
                'type'        => 'text',
                'description' => __( 'Set text', 'zionbuilder' ),
                'title'       => __( 'Option title', 'zionbuilder' ),
                'default'     => __( 'Press me', 'zionbuilder' ),
                'layout'           => 'inline',
                'responsive_options' => true,
                'width'     => 50,
                'render_attribute' => [
                    [
                        'tag_id'    => 'wrapper',
                        'attribute' => 'class',
                        'value'     => 'className{{VALUE}}',
                    ],
                ],
            ]
        );
}
```
