Nodeschool Public Materials


    0.1.8 • Public • Published

    riot-mini-form riot tag (mini-form)

    Build Status

    mini-form Riot JS signup and subscription miniature form component



    A mini-form is a form that displays one or two emboldened inputs per page in a wizard like format. It can be used for newsletter sign-up, web sign-up etc. This mini-form is designed to work with RiotJS and can be included in your project via npm and browserify or some other dependecy packaging tools.

    Getting Started

    1. Installation

    npm install riot-mini-form

    2. Examples

            <mini-form-button onclick="{ }">Get Started</mini-form-button>
            <mini-form-input data-required field-name="name" placeholder="Your Name?"></mini-form-input>
            <mini-form-input data-valid-email field-name="email" placeholder="Your Email?"></mini-form-input>
            <mini-form-message >Thanks for signing up <em>{ }</em>!</mini-form-message>
        form = riot.mount('mini-form')[0];
        form.on('complete', function(data) {
            /* Now do something with the submitted form data
                data = {
                    name: "???",
                    email: "???"

    3. Tags

    Mini-form Tag

    Mini form tag is to a mini-form-item what a ul or ol is to an li.

    Mini-form Tag Attributes

    • animate-first-item-style="{{className}}" eg. 'flipInX', 'bounce' Tells mini-form which animation to use when first displaying the first item. Can be any animate.css or custom animation class
        <mini-form animate-first-item-style="flipInX">...</mini-form>
    • animate-last-item-style="{{className}}" eg. 'rubberBand', 'jello' Tells mini-form which animation to use after a specified delay on the last mini-form-item
        <mini-form animate-last-item-style="rubberBand">...</mini-form>
    • animate-last-item-delay="{{milliseconds}}" eg. '2000' Milliseconds delay before animate-last-item animation is played
        <mini-form animate-last-item-delay="2000">...</mini-form>
    • restart-after="{{milliseconds}}" eg. '10000', '0' Milliseconds delay before the form is remounted after completion. If '0' or no restart-after attribute is provided the form will not remount.
        <mini-form restart-after="6000">...</mini-form>

    Mini-form-item Tag

    Must be placed within a <mini-form>, represents a page to be displayed in the mini-form's sequence

    Mini-form-item Tag Attributes

    • none available

    Mini-form-input Tag Attributes

    • field-name="{{string}}" eg. 'name', 'email' The name of the data field that will be collected by the mini-form all data is available on mini-form's data property for a field-name of 'name' the corresponding data property would be
        <mini-form-input field-name="name"></mini-form-input>
    • placeholder="{{string}}" eg. 'What is your name?' The text taht will appear in the placeholder and input label for a field-name of 'name' the corresponding data property would be
        <mini-form-input field-name="name" placeholder="What is your name?"></mini-form-input>
    • data-required The user must supply some value to proceed to the next mini-form-item
        <mini-form-input data-required ></mini-form-input>
    • data-valid-email The user must supply a loosely valid email value to proceed to the next mini-form-item
        <mini-form-input data-valid-email ></mini-form-input>

    Submitting form data

    Form data can be submitted once the form has been populated by listening to the 'complete' event however mini-form does not provide a method to submit form data itself

    Copyright and license

    Copyright (c) 2015 Anycode

    Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.


    npm i riot-mini-form

    DownloadsWeekly Downloads






    Last publish


    • qrb