https://github.com/elcobvg/svelte-bulma-forms
Bulma form components for Svelte
https://github.com/elcobvg/svelte-bulma-forms
bulma bulma-css forms javascript svelte svelte-components sveltejs ui
Last synced: about 1 year ago
JSON representation
Bulma form components for Svelte
- Host: GitHub
- URL: https://github.com/elcobvg/svelte-bulma-forms
- Owner: elcobvg
- License: mit
- Created: 2018-07-10T03:25:52.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-01-22T02:59:08.000Z (over 7 years ago)
- Last Synced: 2025-05-14T19:52:44.650Z (about 1 year ago)
- Topics: bulma, bulma-css, forms, javascript, svelte, svelte-components, sveltejs, ui
- Language: HTML
- Homepage: http://svelte-bulma-forms.surge.sh/
- Size: 147 KB
- Stars: 36
- Watchers: 1
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte-bulma-forms
Bulma form components for [Svelte.js](https://svelte.technology/)
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
### 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**](https://github.com/elcobvg/svelte-bulma-forms/tree/master/src/fields)
### Form controls
In cases where you may wish to use **form input fields** by themselves, you can use [**form controls**](https://github.com/elcobvg/svelte-bulma-forms/tree/master/src/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**](https://github.com/elcobvg/svelte-bulma-forms/tree/master/src/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**](https://github.com/elcobvg/svelte-bulma-forms/tree/master/src/validation)
## Made with Svelte
It's made with [Svelte](https://svelte.technology/), 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
}
})
````
### 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
### Reference
- https://bulma.io/documentation/form/general
- https://svelte.technology/guide
- https://fontawesome.com/v4.7.0/