### Extended Controls

#### Input Mask

##### Date Mask dd/mm/yyyy

##### Phone (999) 999-9999

##### International Number +19 999 999 999

##### Phone / xEx (999) 999-9999 / x999999

##### Purchase Order aaaa 9999-****

##### Credit Card Number 9999 9999 9999 9999

##### SSN 999-99-9999

##### ISBN 999-99-999-9999-9

##### Percentage 99%

##### Currency $9999

##### Decimal using RadixPoint 123.654658

##### Email xxx@xxx.xxx

##### Optional masks (99) 9999[9]-9999

##### JIT Masking mm-dd-yyyy

##### OnComplete State Execute a function when the mask is completed.

##### OnInComplete State Execute a function when the mask is incomplete. Executes on blur.

##### OnCleared State Execute a function when the mask is cleared.

##### RTL attribute dd/mm/yyyy

#### Formatter

##### Date Mask dd/mm/yyyy

##### Phone (999) 999-9999

##### International Number +19 999 999 999

##### Phone / xEx (999) 999-9999 / x999999

##### Purchase Order aaaa 9999-****

##### Credit Card Number 9999 9999 9999 9999

##### Currency $9999

##### Decimal using RadixPoint 123.654658

##### SSN 999-99-9999

##### ISBN 999-99-999-9999-9

##### Percentage 99%

##### RTL attribute dd/mm/yyyy

#### Card

Card will take any credit card form and make it the best part of the checkout process (without you changing anything). Everything is created with pure CSS, HTML, and jQuery — no images required.

##### Card Number

##### Card Name

##### Expiry Date

##### Card Number

#### Typeahead

##### Basic Typeahead

When initializing a `typeahead`, you pass the plugin method one or more datasets. The source of a dataset is responsible for computing a set of suggestions for a given query.

##### Prefetch Data

Prefetched data is fetched and processed on initialization. If the browser supports local storage, the processed data will be cached there to prevent additional network requests on subsequent page loads.

##### Remote Data

Remote data is only used when the data provided by local and prefetch is insufficient. In order to prevent an obscene number of requests being made to the remote endpoint, requests are rate-limited.

##### Custom Templates

Custom templates give you full control over how suggestions get rendered making it easy to customize the look and feel of your typeahead. This requires `Handlebars.js` extension for compilation.

##### Default Suggestions

Default suggestions can be shown for empty queries by setting the `minLength` option to 0 and having the source return suggestions for empty queries.

##### Bloodhound Engine

For more advanced use cases, rather than implementing the source for your dataset yourself, you can take advantage of `Bloodhound`, the `typeahead.js` suggestion engine.
Bloodhound is stack, flexible, and offers advanced functionalities such as prefetching, intelligent caching, fast lookups, and backfilling with remote data.

##### Multiple Datasets

Multiple datasets give you visually separated sets of data inside Dropdown menu with `saperate titles`, managed in `templates` option. This looks like a `<optgroup>` titles in selects.

##### Scrollable Dropdown Menu

To change the height of your dropdown menu, just wrap your input in some `div` with `custom css` styles and change necessary css properties or change it in css directly.

##### RTL Support

Typeahead supports `RTL` also. Wrap your input in any div with `text-align: right;` property and add dir="rtl" to your input, now your dropdown menu is right aligned.

#### Bootstrap Maxlength

##### Basic Usage

Default `threshold` value is 10. The badge will show up right below the input after entering 10 or more chars. This is default value and position for threshold.

##### Show Indicator after 6 chars

Use the `threshold` option to show up badge when there are 15 chars or less

##### Always Show Indicator

if `alwaysShow: true` the threshold will be ignored and the remaining length indication will be always showing up while typing or on focus on the input.

##### Change Indicator Color

`warningClass` is the class of the element with the indicator. By default is `badge badge-success` but can be changed to anything you'd like.

`limitReachedClass` is the class the element gets when the limit is reached. By default is `badge badge-important badge-danger` but can be changed to anything you'd like.

##### Change Indicator Format

Some attributes are used to change badge format. Attributes : `separator`,`preText`,`postText`,and`validate`.

##### Indicator Position

The field counter can be positioned at the `top`, bottom, left or right. All you need to do is specify the placement option, with one of those strings. If none is specified, the positioning will be defauted to 'bottom'.

##### Indicator on the corners

You can also place the maxlength indicator on the corners: bottom-right, top-right, `top-left` and bottom-left.

##### Indicator Inside

You can also place the maxlength indicator inside the input: `centered-right`.

##### Fully Featured

##### Support Textarea

Bootstrap maxlength supports textarea as well as inputs.

#### Theme Customizer

Customize & Preview in Real Time

##### Menu Color Options

##### Layout Options

Collapsed Menu
Fixed Layout
Boxed Layout
Static Layout
Native Scroll
Right Side Icons
Bordered Navigation
Flipped Navigation
Collapsible Navigation
Static Navigation
Brand Center
Static Top

##### Navigation Color Options

###### Solid

Default
Primary
Danger
Success
Blue
Cyan
Pink

###### Gradient

Default
Primary
Danger
Success
Blue
Cyan
Pink
Default
Primary
Danger
Success
Blue
Cyan
Pink

### Solid

Default
Primary
Danger
Success
Blue
Cyan
Pink

### Gradient

Default
Primary
Danger
Success
Blue
Cyan
Pink
Default
Primary
Danger
Success
Blue
Cyan
Pink
Buy Now