---
title: "Controls"
date: 2018-09-09
author: "nK"
---

# Controls

These controls you can use in filers to extend Portfolio options (read **DEV: WP filters.** in FAQ).

### Options available in all controls:

```
array(
    // Control type. Full list you can find below.
    'type'        => 'text',
    'label'       => false,
    'description' => false,
    'name'        => '',
    'placeholder' => '',
    'readonly'    => false,
    'default'     => 'default value',

    // Use the function to getting value.
    'value_callback' => '',

    // hint.
    'hint'        => false,
    'hint_place'  => 'top',

    // support for WPML.
    'wpml'        => false,

    // condition.
    'condition'   => array(
        /**
         * Array of arrays with data:
         *  'control' - control name.
         *  'operator' - operator (==, !==, >, <, >=, <=).
         *  'value' - condition value.
         */
    ),

    // custom styles.
    'style'       => array(
        array(
            'element'  => '.vp-portfolio__item-overlay',
            'property' => 'background-color',
        ),
    ),

    'class'         => '',
    'wrapper_class' => '',
);
```

### text

```
array(
    'type'        => 'text',
    'label'       => esc_html__( 'Text field', 'visual-portfolio' ),
    'description' => esc_html__( 'Text field description', 'visual-portfolio' ),
    'name'        => 'text_control_uniq_name',
    'placeholder' => esc_html__( 'Text field placeholder', 'visual-portfolio' ),
    'default'     => 'default value',

    // hint.
    'hint'        => esc_html__( 'Text field hint', 'visual-portfolio' ),
    'hint_place'  => 'left',
);
```

### hidden

```
array(
    'type'        => 'hidden',
    'name'        => 'hidden_control_uniq_name',
    'default'     => 'default value',
);
```

### url

```
array(
    'type'        => 'url',
    'label'       => esc_html__( 'URL field', 'visual-portfolio' ),
    'name'        => 'url_control_uniq_name',
    'default'     => 'default value',
);
```

### textarea

```
array(
    'type'        => 'textarea',
    'label'       => esc_html__( 'Textarea field', 'visual-portfolio' ),
    'name'        => 'textarea_control_uniq_name',
    'default'     => 'default value',
    'cols'        => 30,
    'rows'        => 10,
);
```

### checkbox

```
array(
    'type'        => 'checkbox',
    'label'       => esc_html__( 'Checkbox field', 'visual-portfolio' ),
    'name'        => 'checkbox_control_uniq_name',
    'default'     => true,
);
```

### toggle

```
array(
    'type'        => 'toggle',
    'label'       => esc_html__( 'Toggle field', 'visual-portfolio' ),
    'name'        => 'toggle_control_uniq_name',
    'default'     => true,
);
```

### range

```
array(
    'type'        => 'range',
    'label'       => esc_html__( 'Range field', 'visual-portfolio' ),
    'name'        => 'range_control_uniq_name',
    'min'         => 1,
    'max'         => 15,
    'step'        => 1,
    'default'     => 5,
);
```

### select2

```
array(
    'type'        => 'select',
    'label'       => esc_html__( 'Select field', 'visual-portfolio' ),
    'name'        => 'select_control_uniq_name',
    'options'     => array(
        'val1' => esc_html__( 'Value 1', 'visual-portfolio' ),
        'val2' => esc_html__( 'Value 2', 'visual-portfolio' ),
    ),
    'default'     => 'val1',
    'searchable'  => false,
    'multiple'    => false,
    'tags'        => false,
);
```

### color

```
array(
    'type'        => 'color',
    'label'       => esc_html__( 'Color field', 'visual-portfolio' ),
    'name'        => 'color_control_uniq_name',
    'default'     => '#ccc',
    'alpha'       => true,
);
```

### align

```
array(
    'type'        => 'align',
    'label'       => esc_html__( 'Align field', 'visual-portfolio' ),
    'name'        => 'align_control_uniq_name',
    'default'     => 'center',
    'extended'    => true,
);
```

## All control types

The `select2` type is now named `select`. Every type below accepts the common keys as well: `label`, `description`, `default`, `condition`, `style`, `wpml`, `reload_iframe`, `setup_wizard` and `group`.

TypeExtra keys`text`, `textarea`, `url`, `hidden`none`number``min`, `max`, `step``range``min`, `max`, `step``unit`A CSS length with a unit picker.`radio`, `buttons``options``select``options`, `searchable`, `multiple`, `creatable`, `tags`, or `options_callback` for a list fetched over AJAX.`toggle`, `checkbox``alongside` label`color``alpha`, `gradient``align``extended` for nine positions, otherwise three.`aspect_ratio`none`icons_selector``options`, each with `icon` and `title`; `collapse_rows``tiles_selector`none`elements_selector``locations`, `elements``gallery``focal_point``sortable``options`, each of which can be disabled.`code_editor``mode`, `min_lines`, `max_lines`, `classes_tree`, `encode``html`, `notice`, `pro_note`, `section_heading`Display only. They store no attribute.`category_navigator`, `category_toggle_group`, `category_collapse`, `category_tabs`Panel structure inside the Skin panel.