svelte-bulma-forms

Bulma form components for Svelte.js

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

Features

* 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 http://svelte-bulma-forms.surge.sh/

Install

npm install svelte-bulma-forms

Use

Import the components you need in your Svelte project.

```javascript
import {
TextField,
DateField,
EmailField
} from 'svelte-bulma-forms/module'

export default {
components: {
TextField,
DateField,
EmailField,
...
}
}
``
And then use them like so:

``html




I agree to the terms and conditions




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

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

``html


``

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

``javascript
require('/path/to/node_modules/bulma/css/bulma.min.css')
require('/path/to/node_modules/font-awesome/css/font-awesome.min.css')
``

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

Available elements

$3

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

$3

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

$3

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

$3


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

$3

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:

``html

``
create components like so:

``javascript
const { EmailField } = SvelteBulmaForms

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

$3

- https://github.com/elcobvg/svelte-bulma-components a collection of Bulma UI components
- https://github.com/elcobvg/svelte-autocomplete lightweight autocomplete component, without the Bulma styling

$3

- https://bulma.io/documentation/form/general
- https://svelte.technology/guide
- https://fontawesome.com/v4.7.0/