Text inputs
Input fields with options
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.

Show source code
                            
												// Basic text input
												$("#alpaca-basic").alpaca({
												    data: "I Love Alpaca Ice Cream!",
												    options: {
												        focus: false
												    }
												});
											
										
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.

Show source code
                            
												// Display only view
												$("#alpaca-static").alpaca({
												    data: "I Love Alpaca Ice Cream!",
												    schema: {
												        type: "string"
												    },
												    view: "bootstrap-display"
												});
											
										
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.

Show source code
                            
												// Text input label
												$("#alpaca-input-label").alpaca({
												    data: "I Love Alpaca Ice Cream!",
												    options: {
												        label: "Input label",
												        focus: false
												    }
												});
											
										
Label for static input

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.

Show source code
                            
												// Static input label
												$("#alpaca-static-label").alpaca({
												    data: "I Love Alpaca Ice Cream!",
												    schema: {
												        type: "string"
												    },
												    options: {
												        label: "Input label"
												    },
												    view: "bootstrap-display"
												});
											
										
Validation

A more developed example that specifies not only the data but also the schema, options and some basic input validation. In this example text field is limited to minimum 3 characters and maximum 5 characters. Try to change default input value.

Show source code
                            
												// Validation
												$("#alpaca-validation").alpaca({
												    data: "Mint",
												    schema: {
												        minLength: 3,
												        maxLength: 5
												    },
												    options: {
												        label: "Ice Cream",
												        helper: "Your favorite ice cream?",
												        size: 30,
												        focus: false
												    }
												});
											
										
Predefined value

In this example, we intentionally set the data to something that is invalid. The schema specifies that the maximum length of the allowed value is 8 characters. Our value exceeds that and so we receive a message straight away indicating this problem.

Show source code
                            
												// Predefined value
												$("#alpaca-validation-predefined").alpaca({
												    data: "Mint Chocolate",
												    schema: {
												        minLength: 3,
												        maxLength: 5
												    },
												    options: {
												        label: "Ice Cream",
												        helper: "Please tell us the kind of ice cream you love most!",
												        size: 30,
												        focus: false,
												        placeholder: "Enter an ice cream flavor"
												    }
												});
											
										
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.

Show source code
                            
												// Disallow empty spaces
												$("#alpaca-disallow-empty").alpaca({
												    schema: {
												        type: "string"
												    },
												    options: {
												        type: "lowercase",
												        label: "User Name",
												        disallowEmptySpaces: true,
												        helper: "Type something with empty space",
												        focus: false
												    }
												});
											
										
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.

Show source code
                            
												// Disallow values
												$("#alpaca-disallow-values").alpaca({
												    data: "Mickey Mantle",
												    schema: {
												        type: "string",
												        disallow: ["Mickey Mantle", "Mickey"]
												    },
												    options: {
												        label: "Name",
												        focus: false
												    }
												});
											
										
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.

Show source code
                            
												// Typeahead
												$("#alpaca-typeahead").alpaca({
												    schema: {
												        type: "string"
												    },
												    options: {
												        type: "text",
												        label: "Company Name",
												        helper: "Select the name of a computing company",
												        placeholder: "Enter 'a'",
												        focus: false,
												        typeahead: {
												            config: {
												                highlight: true,
												                hint: true,
												                minLength: 1
												            },
												            datasets: {
												                type: "local",
												                displayKey: 'value',
												                source: ["Google", "Amazon", "Microsoft", "Apple", "Spotify", "Alpaca", "Another company", "Facebook"]
												            }
												        }
												    }
												});
											
										
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.

Show source code
                            
												// Maxlength
												$("#alpaca-maxlength").alpaca({
												    schema: {
												        type: "string",
												        minLength: 3,
												        maxLength: 25
												    },
												    options: {
												        type: "text",
												        label: "What is your name?",
												        constrainMaxLength: true,
												        constrainMinLength: true,
												        showMaxLengthIndicator: true,
												        focus: false
												    },
												    data: "Jackie Robinson"
												});
											
										
Textarea type
Basic examples of textarea
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.

Show source code
                            
												// Basic textarea
												$("#alpaca-textarea").alpaca({
												    data: "Ice cream or ice-cream...",
												    options: {
												        type: "textarea",
												        label: "Receipt",
												        helper: "Receipt for Best Homemade Ice Cream",
												        rows: 4,
												        cols: 80,
												        focus: false
												    }
												});
											
										
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.

Show source code
                            
												// With placeholder
												$("#alpaca-textarea-placeholder").alpaca({
												    options: {
												        type: "textarea",
												        label: "Receipt",
												        helper: "Receipt for Best Homemade Ice Cream",
												        placeholder: "Enter your favorite ice cream here...",
												        rows: 4,
												        cols: 80,
												        focus: false
												    }
												});
											
										
View mode

In the following example textarea field is rendered in display-only mode, which means textarea is replaced with div block and can't be editable. To set a view only mode, use bootstrap-displayoption added to view option.

Show source code
                            
												// View mode
												$("#alpaca-textarea-static").alpaca({
												    data: "Ice cream or ice-cream...",
												    options: {
												        type: "textarea",
												        label: "Receipt",
												        rows: 6,
												        cols: 80,
												        focus: false
												    },
												    view: "bootstrap-display"
												});
											
										
Single field render

The following example overrides the view property on the field to have just the single field render in an alternate, display-only view. To make it short - view property here is placed inside options property.

Show source code
                            
												// Single field render
												$("#alpaca-textarea-override").alpaca({
												    data: "My name is Dr. Jacobian and I am a neuroscientist...",
												    schema: {
												        type: "string"
												    },
												    options: {
												        type: "textarea",
												        label: "Tell us about yourself",
												        view: "bootstrap-display"
												    }
												});
											
										
Select menus
Basic selects, Multiselect and Select2
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.

Show source code
                            
												// Basic select
												$("#alpaca-select").alpaca({
												    data: "coffee",
												    schema: {
												        enum: ["vanilla", "chocolate", "coffee", "strawberry", "mint"]
												    },
												    options: {
												        label: "Ice cream",
												        helper: "What flavor of ice cream do you prefer?",
												        focus: false
												    }
												});
											
										
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.

Show source code
                            
												// External data source
												$("#alpaca-select-external").alpaca({
												    options: {
												        label: "Ice cream",
												        helper: "Guess my favorite ice cream?",
												        type: "select",
												        focus: false,
												        dataSource: "~/Content/global_assets/demo_data/alpaca/selects.json"
												    }
												});
											
										
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.

Show source code
                            
												// Multiselect
												$("#alpaca-multiselect").alpaca({
												    data: ["Vanilla", "Chocolate"],
												    schema: {
												        type: "array",
												        items: {
												            title: "Ice Cream",
												            type: "string",
												            enum: ["Vanilla", "Chocolate", "Strawberry", "Mint"],
												            minItems: 2,
												            maxItems: 3
												        }
												    },
												    options: {
												        label: "Ice cream",
												        helper: "Guess my favorite ice cream?",
												        type: "select",
												        size: 5,
												        id: "multiselect",
												        focus: false
												    },
												    postRender: function(control) {
												        $("#multiselect").parent().find("input[type=checkbox]").uniform();
												    }
												});
											
										
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.

Show source code
                            
												// Multiselect with remote data
												$("#alpaca-multiselect-remote").alpaca({
												    options: {
												        label: "Select your favorite flavor of ice cream",
												        type: "select",
												        multiple: true,
												        helper: "Guess my favorite ice cream?",
												        size: 3,
												        focus: false,
												        id: "multiselect-remote",
												        dataSource: "~/Content/global_assets/demo_data/alpaca/selects.json"
												    },
												    postRender: function(control) {
												        $("#multiselect-remote").parent().find("input[type=checkbox]").uniform();
												    }
												});
											
										
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.

Show source code
                            
												// Select2 select
												$("#alpaca-select2").alpaca({
												    data: "coffee",
												    schema: {
												        enum: ["vanilla", "chocolate", "coffee", "strawberry", "mint"]
												    },
												    options: {
												        label: "Ice cream",
												        helper: "What flavor of ice cream do you prefer?",
												        id: "select2-basic",
												        focus: false
												    },
												    postRender: function(control) {
												        $('#select2-basic').select2({
												            minimumResultsForSearch: Infinity
												        });
												    }
												});
											
										
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.

Show source code
                            
												// Select2 select with search
												$("#alpaca-select2-search").alpaca({
												    data: "coffee",
												    schema: {
												        enum: ["vanilla", "chocolate", "coffee", "strawberry", "mint"]
												    },
												    options: {
												        label: "Ice cream",
												        helper: "What flavor of ice cream do you prefer?",
												        id: "select2-search",
												        focus: false
												    },
												    postRender: function(control) {
												        $('#select2-search').select2();
												    }
												});