## Form controls

Form controls supported in all example form elements. Form controls automatically receives global styling. The `.form-group` class is the easiest way to add some structure to form elements like <input>, <textarea> and <select>.

##### Basic Inputs

Basic Form Input with diffrent elements and styles.

Text
Password
With placeholder
With default value
Rounded Corners
With help text A block of help text that breaks onto a new line and may extend beyond one line.
Disabled
Textarea
Small Input
Large Input
Number
Date and time
Date
Month
Week
Time
Color Note: type="color" is not supported in Internet Explorer 11 and earlier versions or Safari 9.1 and earlier versions.

##### Input group

Easily extend form controls by adding text, buttons, or button groups on either side of textual `<input>`s.

Amount (in dollars)
$
.00
$
0.00

##### Input colors

Input with success
Input with warning
Input with danger
Primary input
Success input
Info input
Warning input
Danger input

##### Checkboxes and Radio Buttons

###### Custom checkbox

Custom
Primary
Success
Info
Warning
Danger
Dark gray

###### Circled checkbox

Custom
Primary
Success
Info
Warning
Danger
Dark gray

###### Custom radio buttons

Custom
Primary
Success
Info
Warning
Danger
Dark gray

##### Selects

Basic select
Custom select
Multiple select

Customizable dropdown multiselect in AngularX, TypeScript with bootstrap css. More information: Angular 2 Dropdown Multiselect

###### Default

###### Select all/none

###### Select with search filter

##### Datepicker

A lightweight and highly configurable datepicker directive. More information: ng-bootstrap datepicker

###### Basic datepicker

    Month: {{ date.month }}.{{ date.year }}

    Model: {{ model | json }}

###### Multiple months

###### Datepicker in a popup

    Model: {{ modelPopup | json }}

###### Custom day view

This datepicker uses a custom template to display days. All week-ends are displayed with an orange background.

{{ date.day }}

###### Disabled datepicker

##### Timepicker

A lightweight & configurable timepicker directive. More information: ng-bootstrap timepicker

###### Basic timepicker

    Selected time: {{time | json}}

###### Meridian

    Selected time: {{timeMeridian | json}}

###### Basic timepicker

    Selected time: {{timeSeconds | json}}

###### Spinners

###### Custom steps

Hour Step
Minute Step
Second Step

    Selected time: {{timeCustomSteps | json}}

##### Rating

Rating directive that will take care of visualising a star rating bar. More information: ng-bootstrap rating

###### Basic demo

    Rate: {{currentRate}}

###### Events and readonly ratings

    Selected: {{selected}}
    Hovered: {{hovered}}

###### Custom star template

Custom rating template provided as child element

★

    Rate: {{currentRateCustom}}

###### Custom decimal rating

Custom rating template provided via a variable. Shows fine-grained rating display

♥ ♥ ♥♥

    Rate: {{currentRateDecimal}}

###### Form integration

NgModel and reactive forms can be used without the 'rate' binding

Thanks!
Please rate us

    Model: {{ ctrlFormIntegration.value }}

##### Uploads

###### File upload

###### Image upload

###### Multiple Image Uploader