Text inputs
Input fields with optionsBasic 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 textfield.
// 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 textinput 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 labeloption inside set of configuration options.
// 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 staticinput 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 labeloption inside set of configuration options.
// 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 disallowEmptySpacesset 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 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 disallowoption, this will enable input field validation. Try to change input field value to see it in action.
// 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 $.typeaheadauto-completion with a function to provide lookup values. The configblock defines the first argument into the typeahead plugin. The datasetsblock defines the second argument into the typeahead plugin.
// 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 maxLengthas you type.
// 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 textareaBasic 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 placeholderoption 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.
// 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 viewoption.
// 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 viewproperty on the field to have just the single field render in an alternate, display-only view. To make it short - viewproperty here is placed inside optionsproperty.
// 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 Select2Basic 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 dataSourceoption. 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.
// External data source$("#alpaca-select-external").alpaca({ options: { label: "Ice cream", helper: "Guess my favorite ice cream?", type: "select", focus: false, dataSource: "../../../../global_assets/demo_data/alpaca/selects.json" }});Basic multiselect
The following example demonstrates select menu with multiple select option, based on Bootstrap Multiselectplugin. Default multiselect doesn't provide styled checkboxes, so we are using Uniformplugin for custom look.
// 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 dataSourceoption. 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.
// 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: "../../../../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(); }});