Doz-formfield NPM

doz-formfield

All form elements component for DOZ

Install

npm install --save doz-formfield

Live here

Usage

Globally

import Doz from 'doz'

new Doz({
        root: '#app',
        template(h) {
            return h`
                <div>
                    <doz-formfield type="text" label="Insert your name" name="name" required="true"/>
                </div>
                <div>
                    <doz-formfield type="text" label="Insert your surname" name="surname" required="true"/>
                </div>
                <div>
                    <doz-formfield type="select" label="Male or female" name="select" options='["male","female"]' required="true"/>
                </div>
                <div>
                    <doz-formfield type="textarea" label="Insert a message" name="textarea" required="true"/>
                </div>
                <div>
                    <doz-formfield type="url" label="Url Type" name="url" value="http://www.google.it"/>
                </div>
            `
        }
    });

Locally

import Doz from 'doz'
import DozFormfield from 'doz-formfield/lib'

Doz.component('my-wrapper', {
    components: {
        'also-a-custom-name': DozFormfield
    },
    template() {
        return `
            <also-a-custom-name 
                type="checkbox" 
                label="True or flase" name="checkbox" 
                required="true"
            />
        `
    }
});

new Doz({
    root: '#app',
    template: `
        <my-wrapper></my-wrapper>
    `
})

Props

Name	Default	Description
type	text	The type of the component (text, textarea, select, checkbox, url)
name		Input name
classField		CSS field class
value		The initial value for the component
required	false	Set the required field
disabled	false	Set the disabled field
forceupdate	false	Set the forceupdate field
showOpenUrl	true	If the type is url, it gives the possibility to open the link