Dropdown

                Dropdown::widget([
    'value' =>'2',
    'name' => 'my_dropdown',
    'items' => [
        [
            'label' => 'Item 1',
            'value' => '1'
        ],
        [
            'label' => 'Item 2',
            'value' => '2'
        ],
        [
            'label' => 'Item 3',
            'value' => '3'
        ],
    ]
])
                
                

Dropdown styles

Selection search
                Dropdown::widget([
    'value' =>'2',
    'name' => 'my_dropdown',
    'style' => Dropdown::STYLE_SELECTION_SEARCH,
    'items' => [
        [
            'label' => 'Item 1',
            'value' => '1'
        ],
        [
            'label' => 'Item 2',
            'value' => '2'
        ],
        [
            'label' => 'Item 3',
            'value' => '3'
        ],
    ]
])
                
                
Search
                Dropdown::widget([
    'value' =>'2',
    'name' => 'my_dropdown',
    'style' => Dropdown::STYLE_SEARCH,
    'items' => [
        [
            'label' => 'Item 1',
            'value' => '1'
        ],
        [
            'label' => 'Item 2',
            'value' => '2'
        ],
        [
            'label' => 'Item 3',
            'value' => '3'
        ],
    ]
])
                
                
None
                Dropdown::widget([
    'value' => '1',
    'name' => 'my_dropdown',
    'style' => Dropdown::STYLE_NONE,
    'items' => [
        [
            'label' => 'Item 1',
            'value' => '1'
        ],
        [
            'label' => 'Item 2',
            'value' => '2'
        ],
        [
            'label' => 'Item 3',
            'value' => '3'
        ],
    ]
])
                
                

Items customization

Icons and tag
                Dropdown::widget([
    'value' =>'1',
    'name' => 'my_dropdown',
    'items' => [
        [
            'label' => 'Item 1',
            'value' => '1',
            'icon' => 'world'
        ],
        [
            'label' => 'Item 2',
            'value' => '2',
            'icon' => 'car'
        ],
        [
            'label' => 'Item 3',
            'value' => '3',
            'icon' => 'bar',
            'tag' => 'a',
            'options' => [
                'href' => 'http://google.com',
                'target' => '_blank'
            ],
        ],
    ]
])
                
                

Loading

                Dropdown::widget([
    'value' =>'2',
    'name' => 'my_dropdown',
    'loading' => true,
    'items' => [
        [
            'label' => 'Item 1',
            'value' => '1',
        ],
        [
            'label' => 'Item 2',
            'value' => '2'
        ],
        [
            'label' => 'Item 3',
            'value' => '3'
        ],
    ]
])
                
                
Setting Default Description
style Dropdown::STYLE_SELECTION Style. Base styles:
  • Dropdown::STYLE_NONE
  • Dropdown::STYLE_SEARCH
  • Dropdown::STYLE_SELECTION
  • Dropdown::STYLE_SELECTION_SEARCH
U can use custom style, because its additional class =)
loading false Add loading icon
name null Input name
value null Default selected item value
inputOptions array Additional input options
options array Main container html options
items array Items. Required options :
  • label - item label
Additional options :
  • value - item value
  • tag - container tag (default - 'div')
  • icon - awesome icon code (Example : 'calendar')
  • options - main container additional options
Example:
'items' => [
    [
        'label' => 'Item 1',
        'value' => '1'
    ],
    [
        'label' => 'Item 2',
        'value' => '2',
        'tag' => 'a',
        'options' => [
            'href' => '#'
        ],
        'icon' => 'bar'
    ],
]