Svelte Bulma Forms

Bulma form components for Svelte
Alternatives To Svelte Bulma Forms
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
25 days ago2gpl-2.0PHP
Create and Validate PHP Forms in Seconds.
Vue Form Json90
1a year ago28October 12, 2021mitJavaScript
Generate a vue form with validation from an array
Svelte Bulma Forms29
4 years ago16January 22, 20193mitHTML
Bulma form components for Svelte
Bulma Form Builder19
5 years agomitCSS
Web app for drag drop building Bulma forms.
Crispy Forms Bulma15
10 months ago2mitHTML
Django application to add 'django-crispy-forms' layout objects for
Laravel Bulma Auth Preset8
2 years agomitBlade
Laravel 8.x Bulma authentication preset
Anonymous Form Component7
3 months agomitVue
vuejs anonymous form component
Pinegrow Bulma6
5 years agoCSS
Bulma plugin for pinegrow
Form Component6
3 years ago2May 29, 20202mitPHP
Form Component wrapper for Laravel 7, available for Bootstrap and Bulma
Quick Form4
8 months ago5otherTypeScript
Quick HTML forms.
Alternatives To Svelte Bulma Forms
Select To Compare

Alternative Project Comparisons


Bulma form components for Svelte.js

These components offer a convenient way to build HTML forms, either in Svelte projects or in plain JavaScript.


  • all form elements as defined in Bulma
  • built-in basic input validation, easily extendable
  • controls and fields emit events for your app to hook into

Demo at


npm install svelte-bulma-forms


Import the components you need in your Svelte project.

import {
} from 'svelte-bulma-forms/module'

export default {
  components: {

And then use them like so:

<TextField name="name" label="Name" horizontal />

<CheckboxGroup horizontal>
  <CheckboxControl name="agree" required>
    I agree to the <a href="#">terms and conditions</a>

<ButtonField state="info" type="submit" horizontal />

Don't forget to include the Bulma and Font Awesome CSS files!

For including styles, you can either place the below styles in the <head> of your template:

<link href="" rel="stylesheet">
<link href="" rel="stylesheet">

Or you can import them to your webpack/rollup entry point:


Note that you'll have to install bulma and font-awesome first

Available elements

Form fields

Form fields are composite components offering the most convenient way to build forms. The following fields are available:

  • AutoCompleteField
  • ButtonField
  • DateField
  • EmailField
  • FileField
  • PasswordField
  • PasswordMaskField
  • SelectField
  • TextareaField
  • TextField

See form fields

Form controls

In cases where you may wish to use form input fields by themselves, you can use form controls. The following controls are available:

  • AutoCompleteControl
  • ButtonControl
  • CheckboxControl
  • FileControl
  • InputControl
  • MultiSelectControl
  • RadioControl
  • SelectControl
  • TextareaControl

Form groups

Controls like checkboxes and radio buttons need to be grouped together. There is also a group for regular inputs and grouped buttons:

  • CheckboxGroup
  • InputGroup
  • RadioGroup

See form groups

Further information


Each input element emits a change event with its value on input change, which you can use in your app according to your needs.

Custom input validation

In addition to the built-in default input validation, you can supply your own validation rules and messages. Read all about it in the validation documentation

Made with Svelte

It's made with Svelte, which means you don't need any JS framework. Just use the file in the dist directory in any Javascript project:

include the bundle:

<script src="svelte-bulma-forms/dist/index.js"></script>

create components like so:

const { EmailField } = SvelteBulmaForms

const emailInput = new EmailField({
  target: document.querySelector('#email'),
  data: { 
    name: 'email',
    label: 'Email address',
    horizontal: true

See also


Popular Form Projects
Popular Bulma Projects
Popular User Interface Components Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.