Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly. It is similar to Selectize, Chosen, Select2, etc. However it was built using Vue.js only ;)

Related tags

Form Select fire-select
Overview

🔥 _Fireselect_

Vue component that transforms overwhelming select boxes into something fancy, simple and user-friendly.

It is similar to Selectize, Chosen, Select2, etc. However it was built using Vue.js only ;)

Options

name | type | default

  • options | Array | []
    An array of the initial available options.

  • multiple | Boolean | false
    Equivalent to the select multiple attribute.

  • create | Boolean | false
    Allows the creation of new items that aren't in the list of options.

  • helper-message | String | 'Type anything to search'
    Placeholder attribute of search input.

  • placeholder | String | 'Select an item'
    Placeholder attribute of fireselect.

  • add-label | String | 'Add:'
    Text to add new option.

  • no-results-label | String | 'No results found for:'
    Text to appear when no option is found.

  • animation | Boolean | true
    Show animation when item is selected

  • name | String | fire-select[]
    Name attribute of input

  • id | String | fire-select
    Id attribute of input

Usage

<!-- Import the style -->
<link rel="stylesheet" href="../dist/fire-select.css">
..
<!-- Import the script -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.20/vue.min.js"></script>
<script src="../dist/fire-select.js"></script>

<!-- Use fire-select component -->
<fire-select :options="options"></fire-select>

Options

var obj = [
    {value: 'html', label: 'HyperText Markup Language', selected: true},
    {value: 'css', label: 'Cascading Style Sheets'},
    {value: 'js', label: 'Javascript'},
];

var arr = ['HyperText Markup Language', 'Cascading Style Sheets', 'Javascript'];

Events

Vue.js - Dispatch

  • fsOptionAdded When a new item is added.

  • fsOptionSelected When a item is selected.

  • fsOptionDeselect When a item is deselected.

new Vue({
  ...
  events: {
    fsOptionAdded: function(option) {
      // do something
    }
  }
}
You might also like...
Select components using Bulma as CSS framework.

Vue Bulma Select Select components using Bulma as CSS framework Docs/Examples Could be found here TODO Push to NPM Unit testing Multi-select (tags) De

Gabriel Corado 13 Oct 19, 2022
Stylable searchable select component for VueJS. This component is renderless so you are free to customize it how you need to!

Please note that this package is still under active development. We encourage everyone to try it and give feedback. ss-select Searchable stylable sele

Miras Mustimov 27 Dec 27, 2022
Vue 3 multiselect component with single select, multiselect and tagging options.
Vue 3 multiselect component with single select, multiselect and tagging options.

Vue 3 Multiselect Sponsors Other libraries @vueform/slider - Vue 3 slider component with multihandles, tooltips merging and formatting. @vueform/toggl

Vueform 556 Dec 27, 2022
A VueJS plugin that provides a searchable and reactive select list component with no dependencies.
A VueJS plugin that provides a searchable and reactive select list component with no dependencies.

vue-dynamic-select A VueJS plugin that provides a searchable and reactive select list component with no dependencies. View Online Demos Here Installat

Silas Montgomery 17 Sep 18, 2022
Universal select/multiselect/tagging component for Vue.js
Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

Damian Dulisz 6.3k Dec 30, 2022
A multi-select component with nested options support for Vue.js
A multi-select component with nested options support for Vue.js

vue-treeselect A multi-select component with nested options support for Vue.js Features Single & multiple select with nested options support Fuzzy mat

Fangzhou Li 2.6k Jan 1, 2023
A Vue.js search select component

vue-search-select A Vue.js search select component with NO dependencies. CSS borrowed from https://github.com/Semantic-Org Version 2.x Support Vue.js

JungJoo Seo 348 Dec 26, 2022
A component for Vue.js to select double-sided data.
A component for Vue.js to select double-sided data.

Vue Select Sides A component for Vue.js to select double-sided data. The customer can select one or more items and ship them from side to side. Values

Júlio Rosseti 72 Dec 17, 2022
Universal select/multiselect/tagging component for Vue.js
Universal select/multiselect/tagging component for Vue.js

vue-multiselect Probably the most complete selecting solution for Vue.js 2.0, without jQuery. Documentation Visit: vue-multiselect.js.org Sponsors Gol

Damian Dulisz 6.3k Dec 30, 2022
Comments
  • Feature request: Webpack compatibility

    Feature request: Webpack compatibility

    Tried it to get work in a webpack setup. Without success. Am I missing something? Any hints are appreciated. There is also a similar component: https://github.com/sagalbot/vue-select Maybe you should join the forces.

    best regards

    opened by nanotronic 0
Owner
Firework
Firework
GitHub https://firework.github.io/fire-select/
Lightweight and mighty select component like Chosen and Select 2 done the Vue way.

@desislavsd/vue-select Lightweight and mighty select component like Chosen and Select 2 done the Vue way. Demos & Docs License MIT License Copyright (

null 25 Sep 12, 2022
A better way to display select boxes when using `v-for` on objects.

vue-dropdowns A better way to handle v-for on objects. No special dependencies, no jquery, no bootstrap, just VueJS and CSS goodness. Demo Demo - http

Mike Rodham 95 Dec 30, 2022
Vanilla Vue.js component that mimics Selectize behavior (no jquery dependency)

vue-selectize A Vanilla Vue.js component that mimics the selectize.js behavior https://vue-selectize.vilanculo.me Installation yarn add selectize @isn

Ivan Vilanculo 77 Nov 19, 2022
A Selectize wrapper for VueJS

vue2-selectize A Selectize wrapper for VueJS 2. Prerequisites jQuery >= 1.7.0 Installation npm install --save jquery vue2-selectize Usage <selectize v

Carlos González 49 Jul 11, 2021
Everything you wish the HTML select element could do, wrapped up into a lightweight, extensible Vue component.

vue-select Everything you wish the HTML select element could do, wrapped up into a lightweight, zero dependency, extensible Vue component. Vue Selec

Jeff Sagal 4.5k Jan 2, 2023
stf vue select - most flexible and customized select

stf vue select VUE2 stf vue select - most flexible and customized select For detailed explanation on how things work, checkout the DEMO install # inst

Stfalcon LLC 62 Dec 22, 2021
Select & Multi Select implementations for Vue, focused especially on implementing accessibility best practices

This entire repo is very much in an alpha state, and should currently be used only within internal Politico projects, as props / events / classes remain fluid. However, we are working towards a 1.0.0 release, and want to capture our relevant bugs fixed during that process.

POLITICO 12 Jan 1, 2023
Custom select component using Vue.JS

advanced-select What's this Component to render a "select" with advanced interactions (search, select/deselect all, etc) for websites built with Vue a

ENA 15 Nov 24, 2022
Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.

Selecto.js Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch. Demo / API / Main Project ⚙️ Instal

Daybrush (Younkue Choi) 1.2k Jan 9, 2023
Simple multi-select component with items displayed in a table like UI

Vue GridMultiselect Simple multi-select component with items displayed in a table like UI Table of Contents ?? Installation ?? Introduction ?? Basic U

Milos Protic 38 Nov 24, 2022