Widgets ​

For fast and clean form development, the FormField component was created:

// import {FormField} from "jenesius-vue-form"
<form-field :type="type"/>

// import {FormField} from "jenesius-vue-form"
<form-field :type="type"/>

All developed types can be found below:

• Text
• Select
• Password
• Checkbox
• Single Checkbox
• Switch
• Radio
• Single Radio
• Tel
• Range
• number
• Date
• File (in development)
• Email (in development)

text ​

Default field. Plain text field.

<form-field type="text"/>

<form-field type="text"/>

By the way, the type parameter in the case of the "Text" field can be omitted.

Select ​

Represents an element that allows you to select a value from those provided.

Passed parameters:

• options A set of enumerated dimensions. There are two types of transfer: array and object. We will analyze each in more detail, but we recommend using Array to avoid errors and incomprehensible moments in your code. Described in more detail here.

Password ​

Password entry field. It has the ability to switch the visibility mode.

<input field type="password"/>

<input field type="password"/>

Checkbox ​

Elements of type checkbox are displayed as checked checkboxes by default. (marked) upon activation, as you can see on the official government paper form.

<input-field type="checkbox" :options="options"/>

<input-field type="checkbox" :options="options"/>

• options - similar to InputSelect

Single Checkbox ​

If there is only one instance of the checkbox on the interface (as a switch), you can use one flag. Works identically as switch.

<input-field type="single-checkbox" name="use-password"/>

<input-field type="single-checkbox" name="use-password"/>

Switch ​

Switching element. It has two states: on/off, which corresponds to true/false.

<input field type="switch"/>

<input field type="switch"/>

Radio ​

Radio type elements are usually used in selecting one single option. Only one radio button in a given group can be selected at a time.

<input-field type="radio" :options="options"/>

<input-field type="radio" :options="options"/>

• options - similar to InputSelect

Single Radio ​

Like single-checkbox, but for radio field input.

Tel ​

Body type input elements are used to allow the user to enter and edit a phone number.

<input-field type="tel"/>

<input-field type="tel"/>

Range ​

Range input elements allow the user to enter a numeric value that must be greater than or equal to the given value, and not greater than another set value.

<input-field type="range" label="Volume"/>

<input-field type="range" label="Volume"/>

Options:

• min (Number) - The value will not be less than min. The default value is 0.
• max (Number) - The value will not be greater than the maximum. The default value is 100.
• step (Number) - Step value. The default is 1.

Number ​

Number type input elements are used to allow the user to enter a number. They include a built-in check for rejection non-numeric entries.

<input-field type="number" label="Age"/>

<input-field type="number" label="Age"/>

Options:

• step (number) - Step value. The default is 1.

  Age

Date ​

<input-field type="date" label="Created"/>

<input-field type="date" label="Created"/>

Options:

• step (Number) - Step value. The default is 1.