Custom Form Components. Without Any Framework. Accessible.
Using npm:
$ npm install @julmot/form-componentsUsing a CDN:
You can embed individual form components from the dist folder. They are available as CommonJS (e.g. Webpack), AMD (e.g. RequireJS) and global (attached to the window object) packages with their corresponding CSS files.
After you’ve installed the components, you need to generate the HTML according to each component and load and initialize those you want to use. Create a new class instance of the exported class and pass in the element on which you want to initialize the component. In case you’d like to dynamically initialize instances, you can use the also exported selector string to determine if a component exists.
For example when you want to embed the radio component using Webpack with ES6:
import '@julmot/form-components/dist/radio-material-like/radio-material-like.css';
import {
Radio as RadioComponent,
selector as RadioComponentSelector
} from '@julmot/form-components/dist/radio-material-like/radio-material-like';
new RadioComponent(document.querySelector(RadioComponentSelector));In addition to the element on which you want to initialize the component, you can also pass options to the component (see above). For example:
new RadioComponent(document.querySelector(RadioComponentSelector), {
// an object of the options, e.g.
tabbed: false
});These are the options for different components:
tabbed
Type: boolean
Default: true
If the form component should receive a focus outline when tabbing with the keyboard.
debug
Type: boolean
Default: true
Whether or not there should be debug logs.
NOTE: This component isn’t listed on the left side, since it only contains a JS file.
message
Type: boolean
Default: true
focusMessage
Type: boolean
Default: true
When the form is invalid and a message is present and the message option is set to true, the message can be focused (viewport will be shifted to see the message). Set this option to false e.g. if the form is shown within a modal.
onInvalid
Type: function
Default: function(){}
Parameters: The submit event
A callback when the form was submitted invalid.
onValid
Type: function
Default: function(){}
Parameters: The submit event
A callback when the form was submitted valid.
getFocusMessageOffset
Type: function
Default: function(){ return 10; }
A callback to overwrite the default 10px y-offset of the message from the top of the page. The retured value must be a number (without the suffix ‘px’).
focusOnStart
Type: boolean
Default: true
When there’s a message available on the site, this message will be focused for screen readers when the DOM is ready.
debug
Type: boolean
Default: true
Whether or not there should be debug logs.
Please head over to the components list on the left side to see a full list of all available components. If you open a component, head over to the “Notes” tab. Individual components may contain a separate documentation or notes.
There’s also an example form that renders all of them in a single form for demonstration purposes.
There’s one component that isn’t listed on the left side since it’s only one JavaScript file: “form”. This component can be used for client-side validation. It also includes the functionality to handle “reset” events of forms that you may need. Basically it validates like a browser does, respecting e.g. “required” or “pattern” attributes. It also shows the same error messages like your browser does – or if you’ve specified custom validation messages then it’ll show them (using the HTML5 API, e.g. setCustomValidity()). However, the messages are shown in a design-conform way that looks nice with our custom form components. If you’d like to try it out; it’s integrated in the “Example Form” components. It’s exported like a normal component, so you can directly start using it.
The initialization is similar to normal components, you can pass in the <form> DOM element and an optional options object.
Successfully tested in:
<main> element (for detection of inline messages)novalidate attribute on <form> tags (only backend-side validation) or an initialization of the “form” component on them (client-side validation)