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
http://svelte-bulma-forms.surge.sh/
Demo atInstall
npm install svelte-bulma-forms
Use
Import the components you need in your Svelte project.
components: TextField DateField EmailField ...
And then use them like so:
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 <head>
of your template:
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
Events
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:
create components like so:
const EmailField = SvelteBulmaForms const emailInput = target: document data: name: 'email' label: 'Email address' horizontal: true
See also
- 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