Bulma form components for Svelte.js
npm install svelte-bulma-formsThese 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/
npm install svelte-bulma-forms
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 firstAvailable 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
- TextFieldSee 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
- RadioGroupSee 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 } = SvelteBulmaFormsconst emailInput = new EmailField({
target: document.querySelector('#email'),
data: {
name: 'email',
label: 'Email address',
horizontal: true
}
})
```- 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
- https://bulma.io/documentation/form/general
- https://svelte.technology/guide
- https://fontawesome.com/v4.7.0/