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.

.00

0.00

Input colors

Input with success

Input with warning

Input with danger

Primary input

Success input

Info input

Warning input

Danger input

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.

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 }}

Form controls

Basic Inputs

Input group

Input colors

Checkboxes and Radio Buttons

Custom checkbox

Circled checkbox

Custom radio buttons

Selects

Default

Select all/none

Select with search filter

Datepicker

Basic datepicker

Multiple months

Datepicker in a popup

Custom day view

Disabled datepicker

Timepicker

Basic timepicker

Meridian

Basic timepicker

Spinners

Custom steps

Rating

Basic demo

Events and readonly ratings

Custom star template

Custom decimal rating

Form integration

Uploads

File upload

Image upload

Multiple Image Uploader