Asymmetrik/ngx-starter

<form style="max-width: 900px">
    <h1 class="pb-3">Bootstrap Form Examples</h1>

    <h2>Form Controls</h2>

    <div class="mb-3">
        <label class="form-label form-required" for="exampleFormControlText">Example text</label>
        <input
            class="form-control"
            id="exampleFormControlText"
            type="text"
            cdkFocusInitial
            placeholder="Default input"
        />
        <small class="form-text text-body-secondary"
            >Extra explanation provided if necessary.</small
        >
    </div>

    <div class="mb-3">
        <label class="form-label" for="exampleFormControlTextarea1">Example textarea</label>
        <textarea
            class="form-control"
            id="exampleFormControlTextarea1"
            placeholder="Default input"
            rows="4"
        ></textarea>
    </div>

    <h2 class="pt-4">Sizing</h2>
    <div class="mb-3">
        <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" />
    </div>

    <div class="mb-3">
        <input class="form-control" type="text" placeholder="Default input" />
    </div>

    <div class="mb-3">
        <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" />
    </div>

    <h2 class="pt-4">
        ng-select
        <button
            class="btn btn-primary"
            type="button"
            (click)="disableSelects($event, input, ngSelect, ngSelectMulti)"
        >
            Disable
        </button>
    </h2>

    <div class="mb-3">
        <label class="form-label" for="selectInputComp">Standard input for comparison</label>
        <input
            class="form-control"
            id="selectInputComp"
            type="text"
            placeholder="Select a value..."
            #input
        />
    </div>

    <div class="mb-3">
        <label class="form-label" for="ngSelectBS">ng-select</label>
        <ng-select
            id="ngSelectBS"
            bindLabel="value"
            bindValue="value"
            placeholder="Select a value..."
            #ngSelect
            [items]="[
                { value: 'item1' },
                { value: 'item2' },
                { value: 'item3' },
                { value: 'item4' },
                { value: 'item5', disabled: true }
            ]"
        />
    </div>

    <div class="mb-3">
        <label class="form-label" for="ngSelectBSMulti">ng-select (multi)</label>
        <ng-select
            id="ngSelectBSMulti"
            bindLabel="value"
            bindValue="value"
            placeholder="Select a value..."
            #ngSelectMulti
            [items]="[
                { value: 'item1' },
                { value: 'item2' },
                { value: 'item3' },
                { value: 'item4' },
                { value: 'item5', disabled: true }
            ]"
            [multiple]="true"
        />
    </div>

    <h2 class="pt-4">Checkboxes and radios</h2>

    <h3 class="pt-3">Default (stacked)</h3>
    <div class="mb-3">
        <div class="form-check">
            <input class="form-check-input" id="defaultCheck1" type="checkbox" value="" />
            <label class="form-check-label" for="defaultCheck1"> Default checkbox </label>
        </div>
        <div class="form-check">
            <input class="form-check-input" id="defaultCheck2" type="checkbox" value="" checked />
            <label class="form-check-label" for="defaultCheck2"> Default Checked checkbox </label>
        </div>
        <div class="form-check">
            <input class="form-check-input" id="disabledCheck1" type="checkbox" value="" disabled />
            <label class="form-check-label" for="disabledCheck1"> Disabled checkbox </label>
        </div>
        <div class="form-check">
            <input
                class="form-check-input"
                id="disabledCheck2"
                type="checkbox"
                value=""
                checked
                disabled
            />
            <label class="form-check-label" for="disabledCheck2">
                Disabled and Checked checkbox
            </label>
        </div>
    </div>

    <div class="mb-3">
        <div class="form-check">
            <input
                class="form-check-input"
                id="exampleRadios1"
                name="exampleRadios"
                type="radio"
                value="option1"
                checked
            />
            <label class="form-check-label" for="exampleRadios1"> Default radio </label>
        </div>
        <div class="form-check">
            <input
                class="form-check-input"
                id="exampleRadios2"
                name="exampleRadios"
                type="radio"
                value="option2"
            />
            <label class="form-check-label" for="exampleRadios2"> Second default radio </label>
        </div>
        <div class="form-check">
            <input
                class="form-check-input"
                id="exampleRadios3"
                name="exampleRadios"
                type="radio"
                value="option3"
                disabled
            />
            <label class="form-check-label" for="exampleRadios3"> Disabled radio </label>
        </div>
        <div class="form-check">
            <input
                class="form-check-input"
                id="exampleRadios4"
                name="exampleRadios2"
                type="radio"
                value="option4"
                checked
                disabled
            />
            <label class="form-check-label" for="exampleRadios3">
                Disabled and Checked radio
            </label>
        </div>
    </div>

    <h3 class="pt-3">Inline</h3>
    <div class="mb-3">
        <div class="form-check form-check-inline">
            <input class="form-check-input" id="inlineCheckbox1" type="checkbox" value="option1" />
            <label class="form-check-label" for="inlineCheckbox1">1</label>
        </div>
        <div class="form-check form-check-inline">
            <input class="form-check-input" id="inlineCheckbox2" type="checkbox" value="option2" />
            <label class="form-check-label" for="inlineCheckbox2">2</label>
        </div>
        <div class="form-check form-check-inline">
            <input
                class="form-check-input"
                id="inlineCheckbox3"
                type="checkbox"
                value="option3"
                disabled
            />
            <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
        </div>
    </div>

    <div class="mb-3">
        <div class="form-check form-check-inline">
            <input
                class="form-check-input"
                id="inlineRadio1"
                name="inlineRadioOptions"
                type="radio"
                value="option1"
            />
            <label class="form-check-label" for="inlineRadio1">1</label>
        </div>
        <div class="form-check form-check-inline">
            <input
                class="form-check-input"
                id="inlineRadio2"
                name="inlineRadioOptions"
                type="radio"
                value="option2"
            />
            <label class="form-check-label" for="inlineRadio2">2</label>
        </div>
        <div class="form-check form-check-inline">
            <input
                class="form-check-input"
                id="inlineRadio3"
                name="inlineRadioOptions"
                type="radio"
                value="option3"
                disabled
            />
            <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
        </div>
    </div>

    <h3 class="pt-3">Without labels (will use default browser style)</h3>
    <div class="form-check">
        <input
            class="form-check-input position-static"
            id="blankCheckbox"
            type="checkbox"
            value="option1"
            aria-label="..."
        />
    </div>
    <div class="form-check">
        <input
            class="form-check-input position-static"
            id="blankRadio1"
            name="blankRadio"
            type="radio"
            value="option1"
            aria-label="..."
        />
    </div>

    <h3 class="pt-3">Switches</h3>
    <div class="form-check form-switch">
        <input class="form-check-input" id="slideToggle1" type="checkbox" />
        <label class="form-check-label" for="slideToggle1">Toggle this switch element</label>
    </div>
    <div class="form-check form-switch">
        <input class="form-check-input" id="slideToggle2" type="checkbox" disabled />
        <label class="form-check-label" for="slideToggle2">Disabled switch element</label>
    </div>

    <h2 class="pt-3">Buttons</h2>

    <h3 class="pt-3">Standard</h3>
    <button class="me-3 btn btn-primary" type="button">Primary</button>
    <button class="me-3 btn btn-secondary" type="button">Secondary</button>
    <button class="me-3 btn btn-success" type="button">Success</button>
    <button class="me-3 btn btn-danger" type="button">Danger</button>
    <button class="me-3 btn btn-warning" type="button">Warning</button>
    <button class="me-3 btn btn-info" type="button">Info</button>
    <button class="me-3 btn btn-light" type="button">Light</button>
    <button class="me-3 btn btn-dark" type="button">Dark</button>
    <button class="me-3 btn btn-link" type="button">Link</button>

    <h3 class="pt-3">Outline Buttons</h3>
    <button class="me-3 btn btn-outline-primary" type="button">Primary</button>
    <button class="me-3 btn btn-outline-secondary" type="button">Secondary</button>
    <button class="me-3 btn btn-outline-success" type="button">Success</button>
    <button class="me-3 btn btn-outline-danger" type="button">Danger</button>
    <button class="me-3 btn btn-outline-warning" type="button">Warning</button>
    <button class="me-3 btn btn-outline-info" type="button">Info</button>
    <button class="me-3 btn btn-outline-light" type="button">Light</button>
    <button class="me-3 btn btn-outline-dark" type="button">Dark</button>

    <h3 class="pt-3">Large Buttons</h3>
    <button class="me-3 btn btn-primary btn-lg" type="button">Large button</button>
    <button class="me-3 btn btn-secondary btn-lg" type="button">Large button</button>

    <h3 class="pt-3">Small Buttons</h3>
    <button class="me-3 btn btn-primary btn-sm" type="button">Small button</button>
    <button class="me-3 btn btn-secondary btn-sm" type="button">Small button</button>

    <h3 class="pt-3">Active State</h3>
    <a class="me-3 btn btn-primary active" role="button" aria-pressed="true">Primary Button</a>
    <a class="me-3 btn btn-secondary active" role="button" aria-pressed="true">Secondary Button</a>

    <h3 class="pt-3">Disabled State</h3>
    <button class="me-3 btn btn-primary" type="button" disabled>Primary button</button>
    <button class="me-3 btn btn-secondary" type="button" disabled>Secondary Button</button>

    <h3 class="pt-4">Submit Button w/ progress indicator</h3>
    <button class="me-3 btn btn-primary btn-submit" type="button" (click)="submit($event)">
        Submit
    </button>
</form>