⚪
Vuetify-Form-Base
  • Introduction
  • News & Changes
  • Quickstart
    • Start with
    • Installation
    • Intro
    • Features
    • License
  • Form
    • Validation
  • Component
    • Async Loading
    • Attributes
    • From Schema to Component
    • Events
    • Grid
    • Slots
    • CSS
    • Custom Components
    • Tooltips
  • Schema
    • General
    • Autogeneration
    • Computed Schema
    • Display & Typography
    • Grouping Controls
    • Arrays
  • Input & Controls
    • Text-Field & Input
    • Checkbox, Switch & Sliders
    • Radio Buttons
    • Buttons
    • Select, Combo & Autocomplete
    • Lists & Treeviews
    • Date, Time & Color
    • Icons & Images
Powered by GitBook
On this page
  • Select from Items in Schema
  • Select
  • Info to Select
  • Combobox
  • Info to Combobox
  • Autocomplete
  • Info to Autocomplete
  • Example

Was this helpful?

  1. Input & Controls

Select, Combo & Autocomplete

Select from Items in Schema

Select Data on or more values from an array defined in Schema, it can be an array of numbers, strings or objects declared in items:[] property of schema.

Select

The Select Control allows users to select one or multiple options from a list of items

model: {
   single: "Musk",
   multi: [
      "Musk",
      "Taleb"
   ],
   object: {
      "name": "This is C",
      "val": "C"
   }
}
// Select:
schema: { 
    single: { 
        type:'select', 
        items:['Musk', 'Jobs', 'Taleb', 'Harari'] 
    },
    multi: { 
        type:'select', 
        items:['Musk', 'Jobs', 'Taleb', 'Harari'], 
        multiple:true 
    },
    object: { 
        type: 'select', 
        returnObject:true, 
        itemText:'name', 
        items: [
            { name:'This is A', val:'A'}, 
            { name:'This is B', val:'B'}, 
            { name:'This is C', val:'C'}]
        ]
    },
}

Combobox

The ComboBox Control is used to display a drop-down list of various items. It is a combination of a text box in which the user enters an item and a drop-down list from which the user selects an item.

// Combobox:
schema: { 
    combobox: { 
        type:'combobox', 
        items:['Musk', 'Jobs', 'Taleb', 'Harari'] 
    }, 
    ... 
}

Autocomplete

An Autocomplete Control shows suggestions that match what the user types as they type. Users can select a suggestion to complete their entry quickly

// Autocomplete:
schema: { 
    autocomplete: { 
        type:'autocomplete', 
        items:['Musk', 'Jobs', 'Taleb', 'Harari'] 
    }, 
    ... 
}
PreviousButtonsNextLists & Treeviews

Last updated 4 years ago

Was this helpful?

Info to Select
Info to Combobox
Info to Autocomplete
Example