vue-inputs

Menu

• Introduction
• Usage
• Components
  • Input
  • Select
  • Textarea
  • Checkbox
  • Radio

Introduction

Vue Inputs is a package that bundles common form inputs using Bootstrap 4 framework. Each component acts as a wrapper, making it much easier to use form elements without the need to repeat labels, validation and other classes, help blocks.

Installation

npm install vue-inputs --save

Usage

Including this plugin in your VueJS application is very simple. This will register all available components globally, so you can use them anywhere in your application.

import FormInputs from 'vue-inputs'
 
Vue.use(FormInputs)

Components

All components have validator injected into them from parent component, so you don't need to worry about checking for errors. If error with same name as name property is found, validation error will be show on component.

Available props

** Prop **	** Types **	** Default **	** Description **
label	String, Boolean	-	Label to show on the input. If false, label is not shown.
name	String	-	Input's name
value	any	-	Automatically injected when using v-model
inline	Boolean	false	Show label and input inline
input-group	Boolean	false	Show input group addon. Makes slot input-group-append available. (form-input only)
options	Array	-	Options for select (form-select only)
id	String	auto generated	ID (form-checkbox and form-radio only)

Input

<form-input
    label="First Name"
    name="first_name"
    v-model="user.firstName"
></form-input>

Select

<form-select
    label="Role"
    name="role_id"
    v-model="user.roleId"
    :options="roles"
></form-select>

Select component accepts array of objects as options:

roles: [
  { text: 'Select Role', value: null },
  { text: 'Administrator', value: 1 },
  { text: 'Subscriber', value: 2 }
]

Textarea

<form-textarea
    label="Content"
    name="content"
    v-model="post.content"
></form-textarea>

Checkbox

<form-checkbox
    label="I agree to terms and conditions"
    name="terms_and_conditions"
    v-model="user.terms_and_conditions"
></form-checkbox>

Radio

<form-radio
    label="Blue"
    name="color"
    value="blue"
    v-model="product.color"
></form-radio>