This component extends Bulma CSS Framework, so you need to have Bulma installed to use it.

Installation

First, let’s install the component!

There are several ways to get started with BulmaTagsInput.

Use npm to install the bulma-tagsinput package recommended

npm install @creativebulma/bulma-tagsinput

Use the jsDelivr CDN to link to the BulmaTagsInput stylesheet

https://www.jsdelivr.com/package/npm/@creativebulma/bulma-tagsinput

Use the GitHub repository to get the latest development version.

Download from the repository https://github.com/CreativeBulma/bulma-tagsinput/tree/master/dist/

Integrate styles

<link rel="stylesheet" href="https://www.jsdelivr.com/package/npm/@creativebulma/bulma-tagsinput/dist/css/bulma-tagsinput.min.css" />

Open you application’s main sass file and add the following lines:

// Import Bulma first
@import 'bulma';

// Import BulmaTagsInput main Sass File
@import '@creativebulma/bulma-tagsinput/src/sass/index';

Integrate the JavaScript

<script src="https://www.jsdelivr.com/package/npm/@creativebulma/bulma-tagsinput/dist/js/bulma-tagsinput.min.js"></script>
import BulmaTagsInput from '@creativebulma/bulma-tagsinput';

See JavaScript API documentation to find out how to work with the component in Javascript.

Framework Integration

See our ReactJS integration example on CodePen
See our VueJS integration example on CodePen

You’re ready to use BulmaTagsInput !