Select

To use the select component you need to load it in the module you'll use it:

import { TwSelectModule } from 'ng-tw';

@NgModule({
    imports: [..., TwSelectModule],
});

Demo

Basic usage

Basic
Selected Value: value-1
Custom arrow
Selected Value: ---
Compare with
Selected Value: ---
Compare with
Initial value
Selected Value: ---
With Input
Selected Value: ---
With NgModel
Selected Value: value-1

Usage

<div class="demo-container">
    <div class="demo-row">
        <div class="demo-row-title">Basic</div>

        <div class="demo-row-content md:flex-1">
            <tw-select
                class="w-64 max-w-full"
                [formControl]="selectControl"
            >
                <tw-option>Select an option</tw-option>
                <tw-option
                    activeClass="bg-gray-100"
                    selectedClass="font-bold"
                    *ngFor="let item of options"
                    [value]="item.value"
                >
                    {{item.label}}
                </tw-option>
            </tw-select>
        </div>

        <div class="md:flex-1">
            Selected Value: {{ selectControl.value ? selectControl.value : '---' }}
        </div>
    </div>

    <div class="demo-row">
        <div class="demo-row-title">Custom arrow</div>

        <div class="demo-row-content md:flex-1">
            <tw-select
                class="w-64 max-w-full"
                [formControl]="selectCustomArrowControl"
            >
                <svg
                    arrow-icon
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-4 w-4 text-red-500"
                    viewBox="0 0 20 20"
                    fill="currentColor"
                >
                    <path
                        fill-rule="evenodd"
                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                        clip-rule="evenodd"
                    />
                </svg>

                <tw-option>Select an option</tw-option>
                <tw-option
                    activeClass="bg-gray-100"
                    selectedClass="font-bold"
                    *ngFor="let item of options"
                    [value]="item.value"
                >
                    {{item.label}}
                </tw-option>
            </tw-select>
        </div>

        <div class="md:flex-1">
            Selected Value: {{ selectCustomArrowControl.value ? selectCustomArrowControl.value : '---' }}
        </div>
    </div>

    <div class="demo-row">
        <div class="demo-row-title">Compare with</div>

        <div class="demo-row-content md:flex-1">
            <tw-select
                class="w-64 max-w-full"
                [formControl]="selectCompareWithControl"
                [compareWith]="compareWith"
            >
                <tw-option>Select an option</tw-option>
                <tw-option
                    activeClass="bg-gray-100"
                    selectedClass="font-bold"
                    *ngFor="let item of options"
                    [value]="item.value"
                >
                    {{item.label}}
                </tw-option>
            </tw-select>
        </div>

        <div class="md:flex-1">
            Selected Value: {{ selectCompareWithControl.value ? (selectCompareWithControl.value | json) : '---' }}
        </div>
    </div>

    <div class="demo-row">
        <div class="demo-row-title">Compare with <br> Initial value</div>
        <div class="demo-row-content md:flex-1">
            <tw-select
                class="w-64 max-w-full"
                [formControl]="selectCompareWithInitialValueControl"
                [compareWith]="compareWith"
            >
                <tw-option>Select an option</tw-option>
                <tw-option
                    activeClass="bg-gray-100"
                    selectedClass="font-bold"
                    *ngFor="let item of options"
                    [value]="item"
                >
                    {{item.label}}
                </tw-option>
            </tw-select>
        </div>

        <div class="md:flex-1">
            Selected Value: {{ selectCompareWithInitialValueControl.value ? (selectCompareWithInitialValueControl.value | json) : '---' }}
        </div>
    </div>

    <div class="demo-row">
        <div class="demo-row-title">With Input</div>

        <div class="demo-row-content md:flex-1">
            <tw-select
                class="w-64 max-w-full"
                [formControl]="selectControlWithInput"
            >
                <input
                    type="text"
                    class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"
                    placeholder="Search.."
                />

                <tw-option>Select an option</tw-option>
                <tw-option
                    activeClass="bg-gray-100"
                    selectedClass="font-bold"
                    *ngFor="let item of options"
                    [value]="item.value"
                >
                    {{item.label}}
                </tw-option>
            </tw-select>
        </div>

        <div class="md:flex-1">
            Selected Value: {{ selectControl.value ? selectControl.value : '---' }}
        </div>
    </div>
</div>
Progress Bar