Select2

Pages

Users

Edward Norton

edwardnorton@left4code.com

Kevin Spacey

kevinspacey@left4code.com

Tom Cruise

tomcruise@left4code.com

Al Pacino

alpacino@left4code.com

Products

Notifications

Edward Norton

05:09 AM

There are many variations of passages of Lorem Ipsum available,but the majority have suffered alteration in some form,by injected humour,or randomi

Kevin Spacey

01:10 PM

There are many variations of passages of Lorem Ipsum available,but the majority have suffered alteration in some form,by injected humour,or randomi

Tom Cruise

01:10 PM

Contrary to popular belief,Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC,making it over 20

Al Pacino

06:05 AM

Contrary to popular belief,Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC,making it over 20

Denzel Washington

01:10 PM

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500

Basic Select

Show code

Basic

Nested

                                        <div> <label>Basic</label>
    <div class="mt-2"> <select class="select2 w-full">
            <option value="1">Leonardo DiCaprio</option>
            <option value="2">Johnny Deep</option>
            <option value="3">Robert Downey,Jr</option>
            <option value="4">Samuel L. Jackson</option>
            <option value="5">Morgan Freeman</option>
        </select> </div>
</div>
<div class="mt-3"> <label>Nested</label>
    <div class="mt-2"> <select class="select2 block w-full border mt-2">
            <optgroup label="American Actors">
                <option value="1">Leonardo DiCaprio</option>
                <option value="2">Johnny Deep</option>
                <option value="3">Robert Downey,Jr</option>
                <option value="4">Samuel L. Jackson</option>
                <option value="5">Morgan Freeman</option>
            </optgroup>
            <optgroup label="American Actresses">
                <option value="1">Scarlett Johansson</option>
                <option value="2">Jessica Alba</option>
                <option value="3">Jennifer Lawrence</option>
                <option value="4">Emma Stone</option>
                <option value="5">Angelina Jolie</option>
            </optgroup>
        </select> </div>
</div>
                                    

Multi Select

Show code

                                        <select data-placeholder="Select your favorite actors" class="select2 w-full" multiple>
    <option value="1" selected>Leonardo DiCaprio</option>
    <option value="2">Johnny Deep</option>
    <option value="3" selected>Robert Downey,Jr</option>
    <option value="4">Samuel L. Jackson</option>
    <option value="5">Morgan Freeman</option>
</select>
                                    

Input Group

Show code

                                        <div class="flex">
    <div class="z-10 rounded-l w-10 flex items-center justify-center bg-gray-100 border text-gray-600 -mr-1">@</div> <select class="select2 w-full">
        <option value="1">Leonardo DiCaprio</option>
        <option value="2">Johnny Deep</option>
        <option value="3">Robert Downey,Jr</option>
        <option value="4">Samuel L. Jackson</option>
        <option value="5">Morgan Freeman</option>
    </select>
</div>
                                    

Hiding Search Box

Show code

                                        <select data-hide-search="true" class="select2 w-full">
    <option value="1">Leonardo DiCaprio</option>
    <option value="2">Johnny Deep</option>
    <option value="3">Robert Downey,Jr</option>
    <option value="4">Samuel L. Jackson</option>
    <option value="5">Morgan Freeman</option>
</select>
                                    