Josephin Doe

I'm just looking around. Will you tell me something about yourself?

8:20 a.m.

#### JSON Form Fields

Alpaca provides many different out-of-the-box field types. The core field types have no external dependencies whereas the extension types depend on various third-party libraries.

##### Basic text field

A simple example of using Alpaca with nothing more than a string of text. Alpaca looks at your data and determines that it is a string. It then looks for a suitable candidate for representing a string and it decides to use the `text` field.

##### Display only view

Displays a text field using a display-only view. The text field simply prints out and is not editable, a simple block appears instead. This is a default form control type provided by Bootstrap framework.

##### Label for text input

In this example text input field has label. By default appears on top left and uses default Bootstrap styles, including contetual alternatives. To add text label to any input field, use label option inside set of configuration `options`.

##### Label for static label

In this example static input field has label. By default appears on top left and uses default Bootstrap styles, including contetual alternatives. To add text label to any input field, use `label` option inside set of configuration `options`.

##### Disallow empty spaces

A text with field with `disallowEmptySpaces` set to true. This prevents the entry of spaces - it doesn't react on pressing space key. This is useful for things like username entry fields, as configured below.

##### Disallow values

In this example we've added a few predefined values, that are not allowed by default. Just place values you want to disallow into `disallow` option, this will enable input field validation. Try to change input field value to see it in action.

##### Typeahead integration

This example uses `$.typeahead` auto-completion with a function to provide lookup values. The `config` block defines the first argument into the typeahead plugin. The `datasets` block defines the second argument into the typeahead plugin.

##### Maxlength integration

This example constrains the entered text value, forcing it to be at minimum 3 and at most 25. This not only runs validation checks but also enforces some UI behavior. This also shows how many characters are left for `maxLength` as you type.

##### Textarea Types

##### Basic textarea

The following example demonstrates a simple textarea field with a string of text. Textarea type supports almost all available options for text inputs and also includes basic textarea attributes, such as columns and rows.

##### With placeholder

The following example uses the placeholder option to set up the `placeholder` text for a text area field. This basic option is available in all input types: text, number, search, url, email, textarea etc.

##### Select Menus

##### Basic select

Select field with data, options and schema parameters. As default, a select field will be rendered if schema enum property has more than 3 options. The sort order for enumerated values and their text are assumed to be alphanumeric.

##### External data source

Select field with external data source using `dataSource` option. If a string, it is considered to be a URI to a service that produces a object containing key/value pairs or an array of elements. Function needs to produce the same list.

##### Basic multiselect

The following example demonstrates select menu with multiple select option, based on `Bootstrap Multiselect` plugin. Default multiselect doesn't provide styled checkboxes, so we are using Uniform plugin for custom look.

##### Multiselect data source

Select field with external data source using `dataSource` option. If a string, it is considered to be a URI to a service that produces a object containing key/value pairs or an array of elements. Function needs to produce the same list.

##### Select2 basic

The following example demonstrates default implementation of Select2 library - here we need to specify select ID first, then initialize Select2 plugin using that ID selector. This is a custom integration, which is not supported in Alpaca by default.

##### Select2 with search

The following example demonstrates Select2 select with search field - here we need to specify select ID first, then initialize Select2 plugin using that ID selector. This is a custom integration, which is not supported in Alpaca by default.

##### Option trees

Dependent option trees

##### Option tree field

This example asks a user what number they would like on the sports jersey. They're always able to just type in a value. Here, we provide a sequence of dropdowns to let them select a sport, team and athlete. The jersey number is then automatically filled in.

##### Using connector

The following example produces the same form, but uses a connector to load the schema and options. The options JSON is loaded and merged with some inline options that provide to override a submit click handler.

##### CKEditor field

Render CKEditor editor

##### Full featured editor

The `ckeditor` field. The CK Editor field renders the CK editor control that allows users to visually work with HTML and save the results back into a text property. This is a full example of the CK Editor at work. The point here is to show how it looks in full. In the examples that follow, we'll trim this down. Note - CKeditor must be included in your page ahead of the control loading in order for this to work properly.

##### Input types

Supported input types

##### Lowercase

The following example demonstrates how Alpaca library can format text inside input field. To apply `lowercase` text style, set format option to `lowercase` inside `schema` parameter.

##### Uppercase

The following example demonstrates how Alpaca library can format text inside input field. To apply `uppercase` text style, set format option to `uppercase` inside `schema` parameter.

##### Search type

The `search` field implements a search box that provides a search-optimized control. It allows for the specification of search terms with an optimized user interface. It uses the HTML5 'search' input type, but not the actual search.

##### Integer type

The following example demonstrates `integer` field with data, options and schema parameters. Minimum value is set to 18, maximum to 25. Validation is also enabled, try to change input value to see it in action.

##### Password type

The following example demonstrates `password` field type. Here input doesn't have any optional parameters, but a very basic setup. This input field type supports all available options and parameters.

##### Email type

The following example demonstrates `email` field type. Here input doesn't have any optional parameters, but a very basic setup. This input field type supports all available options and parameters. Validation enabled by default.

##### Currency type

The following example demonstrates `currency` field type. Here input doesn't have any optional parameters, but a very basic setup. The currency field uses the JQuery Price Format plugin to render format the input as it's entered.

##### Personal name type

The following example demonstrates custom `personal name` field type. Every time you press space key, new word starts with capital letter. This input field type supports all available options and parameters. Validation enabled by default.

##### Basic file input

The following example demonstrates a basic single file input. This input field type supports all available options and parameters. Additionally you can specify schema format. Validation is disabled by default.

##### Static mode

The following example demonstrates a basic single file input in `read only` mode. This input field type supports all available options and parameters. Additionally you can specify schema format. Validation is disabled by default.

##### Select helpers

Country and state selects

##### Country Selector

The following example demonstrates `country` field with default settings. To use this kind of select helper, just set type option to `country` in your configuration. Supports all available options.

##### State selector

The following example demonstrates `state` field with default settings. To use this kind of select helper, just set type option to `state` in your configuration. Supports all available options.

##### Searchable select (Country)

The following example demonstrates `country` field with integrated Select2 plugin. To initialize Select2 on select, you need to add init code in `postRender` callback. Supports all available options.

##### Searchable select (State)

The following example demonstrates `state` field with integrated Select2 plugin. To initialize Select2 on select, you need to add init code in `postRender` callback. Supports all available options.

##### Checkbox inputs

Checkbox inputs variations

##### Basic checkbox list

The following example demonstrates checkbox list used for multiple values provided as an array. Validation is enabled by default and requires proper options added to checkbox configuration. Supports all available input-specific options.

##### Styled checkbox list

The following example demonstrates multiple checkbox list with custom style added by Uniform plugin. Validation is enabled by default and requires proper options added to checkbox configuration. Supports all available input-specific options.

##### Display only mode

The following example demonstrates checkbox input type in display-only mode. Validation is enabled by default and requires proper options added to checkbox configuration. Supports all available input-specific options.

##### Disabled mode

The following example demonstrates styled checkbox input in disabled mode. Validation is enabled by default and requires proper options added to checkbox configuration. Supports all available input-specific options.

##### Radio inputs

Radio button variations

##### Basic radios

The following example demonstrates `radio` button field with more than 3 options and custom option labels. Validation is enabled by default and requires proper options added to checkbox configuration. Supports all available input-specific options.

##### Styled radios

The following example demonstrates radio button field with custom style added by Uniform plugin. Validation is enabled by default and requires proper options added to checkbox configuration. Supports all available input-specific options.

##### Disabled mode

The following example demonstrates styled radio button in disabled mode. Validation is enabled by default and requires proper options added to checkbox configuration. Supports all available input-specific options.

##### Required radios

The following example demonstrates radio button with validation options and requirements. Validation engine automatically displays multiple notifications. To use, simply set `required` option to `true` in configuration.