@orcden/od-forms v8.2.3

OD Forms

A series of components to make building html forms fast and easy. NEW in 8.2.0: Dynamic labels!

<od-form> is a smart component to wrap other OD Form elements. It offers a series of benefits over semantic html forms while maintaining the ability to interact as one would normally with an html form. Supports semantic html attributes.

<od-form-array> is a smart component to wrap other OD Form elements. It creates a series of od-form elements based on a template to return an array of data. It also allows for simple creation and deletion of entries.

<od-form-input> is a simple component to create an input element. Like other Form Elements it comes with a series of styling and functional benefits including built in labels and semantic html attributes.

<od-form-textarea> is a simple component to create a textarea element. Like other Form Elements it comes with a series of styling and functional benefits including built in labels and semantic html attributes.

<od-form-selectlist> is a simple component to create a select element. Like other Form Elements it comes with a series of styling and functional benefits including built in labels and semantic html attributes. Supports both dynamic options and statically defined options.

<od-form-multiselect> is a simple component to create a series of checkbox elements. Like other Form Elements it comes with a series of styling and functional benefits including built in labels and semantic html attributes. Supports both dynamic options and statically defined options.

<od-form-radioselect> is a simple component to create a series of radio elements. Like other Form Elements it comes with a series of styling and functional benefits including built in labels and semantic html attributes. Supports both dynamic options and statically defined options.

<od-form-richtext> is a simple component to create custom richtext field. Like other Form Elements it comes with a series of styling and functional benefits including built in labels and semantic html attributes.

Installation

• Install with npm

npm i @orcden/od-forms

Usage

Please note that your usage may differ depending on your framework

import { OdForm, OdFormInput } from '@orcden/od-forms';

<od-form id='od-form1'>                 //unique id required
    <od-form-input  name='first-name'   //required
                    autocomplete='given-name'>First Name: </od-form-input>
    
    <od-form-textarea   name='textarea'>Textarea: </od-form-textarea>

    <od-form-selectlist name='select1'
                        options-get='http://myapiroute.com/api/options' //returns [{ optionName: 'option 1', id: '0' },...]
                        options-label='optionName'
                        options-value='id'>
        <label slot='label'>Select1:</label>
        <option value=''>-</option> //statically defined option
    </od-form-selectlist>

    <od-form-multiselect    name='multi'
                            options-get='http://myapiroute.com/api/options'
                            options-label='optionName'
                            options-value='id'>
        <label slot='label'>Multi:</label>
        <od-form-input  value='1st'>1st: </od-form-input> //statically defined option
    </od-form-multiselect>
                
    <od-form-radioselect    name='radio'
                            options-get='http://myapiroute.com/api/options'
                            options-label='optionName'
                            options-value='id'>
        <label slot='label'>Radio:</label>
        <od-form-input  value='1st'>1st: </od-form-input>
    </od-form-radioselect>
</od-form>

<od-form-array id='od-form-array1'>                 //unique id required
    <od-form-input  name='first-name'               //required
                    autocomplete='given-name'>First Name: </od-form-input>
    
    <od-form-textarea   name='textarea'>Textarea: </od-form-textarea>
                
    <od-form-radioselect    name='radio'
                            options-get='http://myapiroute.com/api/options'
                            options-label='optionName'
                            options-value='id'>
        <label slot='label'>Radio:</label>
        <od-form-input  value='1st'>1st: </od-form-input>
    </od-form-radioselect>
</od-form-array>

//  **Also supports any other OD Form Element**

Attributes

OD Form

** Also supports any semantic html form attribute

OD Form Array

OD Form Input

** Also supports any semantic html input attribute

OD Form Textarea

** Also supports any semantic html input attribute

OD Form Selectlist

** Also supports any semantic html input attribute

OD Form Multiselect

** Also supports any semantic html input attribute

OD Form Radioselect

** Also supports any semantic html input attribute

OD Form Richtext

Properties

OD Form

OD Form Array

OD Form Input

OD Form Textarea

OD Form Selectlist

OD Form Multiselect

OD Form Radioselect

OD Form Richtext

Functions

OD Form

OD Form Array

Any Form Element

Styling

• CSS variables are available to alter the default styling provided

Development

Run development server and show demo

npm run demo

Run linter

npm run lint

Fix linter errors

npm run fix

Build for production

npm run build