Laraform

https://laraform.io/docs
Admin
Laraform is a full-stack form builder for Vue.js and Laravel that enables developers to create...
Tokens:113,271
Snippets:1,223
Trust Score:6.2
Update:5 months ago
Show doc for...
Tokens:
Raw
### Configuring Tabs

Source: https://laraform.io/docs/1.x/basics/wizard-and-tabs

This example demonstrates how to configure tabs with custom button labels and disabling the 'previous' button for the first tab.

```php
<?php

namespace App\Forms;

class TabsForm extends \Laraform
{
  public function tabs() {
    return [
      'personal_details' => [
        'label' => 'Personal details',
        'elements' => ['firstname', 'lastname'],
        'buttons' => [
          'previous' => false
        ]
      ],
      'contact_details' => [
        'label' => 'Contact details',
        'elements' => ['email', 'phone'],
        'labels' => [
          'previous' => 'Go back',
          'next' => 'Continue'
        ]
      ],
      'job_history' => [
        'label' => 'Job history',
        'elements' => ['previous_jobs']
      ]
    ];
  }

  public function schema() {
    return [
      'firstname' => [
        'type' => 'text',
        'label' => 'First name'
      ],
      'lastname' => [
        'type' => 'text',
        'label' => 'Last name'
      ],
      'email' => [
        'type' => 'text',
        'label' => 'Email'
      ],
      'phone' => [
        'type' => 'text',
        'label' => 'Phone'
      ]
    ];
  }
}
    
```

--------------------------------

### Create Theme File

Source: https://laraform.io/docs/1.x/how-tos/creating-theme

Create a new theme file to define custom styles and properties. This example extends the default 'bs4' theme.

```javascript
import utils from '@laraform/laraform/src/utils'
import bs4 from '@laraform/laraform/src/themes/bs4'

export default utils.extendTheme(bs4, {
  classes: {},
  elements: {},
  components: {},
  layouts: {},
  grid: {},
})
```

--------------------------------

### Create Theme Styles

Source: https://laraform.io/docs/1.x/how-tos/creating-theme

Create a SCSS file to extend existing theme styles. This example imports default 'bs4' variables, mixins, and components.

```scss
.my-theme {
  @import '~laraform/src/themes/bs4/scss/vars';
  @import '~laraform/src/themes/bs4/scss/mixins';
  @import '~laraform/src/themes/bs4/scss/components';
}
```

--------------------------------

### Install Webpack Bundle Analyzer

Source: https://laraform.io/docs/1.x/how-tos/optimization

Install the webpack-bundle-analyzer package to analyze your bundle size. This is a development dependency.

```bash
$ npm install --save-dev webpack-bundle-analyzer
```

--------------------------------

### Filesystem Disk Configuration Example

Source: https://laraform.io/docs/1.x/how-tos/uploading-files

Illustrates the configuration for different storage disks within Laravel's filesystem settings. The 'public' disk is commonly used for web-accessible files.

```php
// config/filesystems.php

return [
  // ...
  'disks' => [
    'local' => [
      'driver' => 'local',
      'root' => storage_path('app'),
    ],
    'public' => [
      'driver' => 'local',
      'root' => storage_path('app/public'),
      'url' => env('APP_URL') . '/storage',
      'visibility' => 'public',
    ],
    's3' => [
      'driver' => 's3',
      'key' => env('AWS_KEY'),
      'secret' => env('AWS_SECRET'),
      'region' => env('AWS_REGION'),
      'bucket' => env('AWS_BUCKET'),
    ],
  ],
  // ...
]
```

--------------------------------

### Install Laraform Vue Package

Source: https://laraform.io/docs/1.x/installation

Install the Laraform Vue package using npm after setting up the private registry and dependencies.

```bash
$ npm install @laraform/laraform --save
```

--------------------------------

### Create a Simple Wizard Form

Source: https://laraform.io/docs/1.x/basics/wizard-and-tabs

Define a multi-step form by specifying steps, their labels, and the elements within each step. This example creates a profile form with personal details, contact details, and job history steps.

```php
<?php

namespace App\Forms;

class WizardForm extends \Laraform
{
  public function wizard() {
    return [
      'personal_details' => [
        'label' => 'Personal details',
        'elements' => ['firstname', 'lastname'],
        'buttons' => [
          'previous' => false
        ]
      ],
      'contact_details' => [
        'label' => 'Contact details',
        'elements' => ['email', 'phone'],
        'labels' => [
          'previous' => 'Go back',
          'next' => 'Continue'
        ]
      ],
      'job_history' => [
        'label' => 'Job history',
        'elements' => ['previous_jobs']
      ]
    ];
  }

  public function schema() {
    return [
      'firstname' => [
        'type' => 'text',
        'label' => 'First name'
      ],
      'lastname' => [
        'type' => 'text',
        'label' => 'Last name'
      ],
      'email' => [
        'type' => 'text',
        'label' => 'Email'
      ],
      'phone' => [
        'type' => 'text',
        'label' => 'Phone'
      ]
    ];
  }
}
        
```

--------------------------------

### Import Laraform and Install Vue Plugin

Source: https://laraform.io/docs/1.x/how-tos/using-only-frontend

Import Laraform and use Vue.use() to install it globally. This makes Laraform available throughout your Vue application.

```javascript
import Vue from 'vue'
import Laraform from '@laraform/laraform'

Vue.use(Laraform)

const app = new Vue({
  el: '#app'
})
```

--------------------------------

### Basic CheckboxGroup Example

Source: https://laraform.io/docs/1.x/reference/checkboxgroup-element

This snippet demonstrates the basic structure of a CheckboxGroup element. It includes a label and a list of options, each with a value and label.

```html
<label class="form-label"> 
  Checkbox Group
  <small v-if="item.description" v-html="item.description" class="text-muted" ></small>
</label>

```

--------------------------------

### Register Theme File

Source: https://laraform.io/docs/1.x/how-tos/creating-theme

Register your custom theme with Laraform using the `.theme()` method before installing Laraform. This example uses 'my-theme'.

```javascript
import Vue from 'vue'
import Laraform from '@laraform/laraform/src'
import MyTheme from './themes/my_theme'

Laraform.theme('my-theme', MyTheme)

Vue.use(Laraform)

const app = new Vue({
  el: '#app'
})
```

--------------------------------

### Install Laravel Package

Source: https://laraform.io/docs/1.x/installation

Install the Laraform Laravel package using Composer. You will be prompted for your username and password, which are your Laraform account's email and password.

```bash
composer require laraform/laraform-laravel
```

--------------------------------

### Define Route for Auto-Update Example

Source: https://laraform.io/docs/1.x/basics/updating-data

This route renders the user profile form without loading any initial data, allowing for the auto-update mechanism to be demonstrated.

```php
Route::get('/user/profile', function(){
  return view('user.profile', [
    'form' => app('App\Forms\UserForm')
  ])
})
```

--------------------------------

### Conditional Wizard Step

Source: https://laraform.io/docs/1.x/basics/wizard-and-tabs

This example shows how to make the 'Company details' wizard step conditional, appearing only when the 'Register as company' checkbox is checked.

```php
<?php

namespace App\Forms;

class RegistrationForm extends \Laraform
{
  public function wizard() {
    return [
      'personal_details' => [
        'label' => 'Personal details',
        'elements' => ['name', 'register_company']
      ],
      'company_details' => [
        'label' => 'Company details',
        'elements' => ['company_name', 'company_address'],

        // Company details conditions
        'conditions' => [
          ['register_company', true]
        ]
      ],
      'account_details' => [
        'label' => 'Account details',
        'elements' => ['email', 'password'],
      ]
    ];
  }

  public function schema() {
    return [
      'name' => [
        'type' => 'text',
        'label' => 'Name',
        'rules' => 'required'
      ],
      'register_company' => [
        'type' => 'checkbox',
        'text' => 'Register as company'
      ],
      'company_name' => [
        'type' => 'text',
        'label' => 'Company name',
      ],
      'company_address' => [
        'type' => 'text',
        'label' => 'Company address',
      ],
      'email' => [
        'type' => 'text',
        'label' => 'Email address'
      ],
      'password' => [
        'type' => 'text',
        'label' => 'Password'
      ]
    ];
  }
}
    
```

--------------------------------

### Example Data for Nested Objects

Source: https://laraform.io/docs/1.x/basics/nested-elements

This is an example of how data would be structured when using nested objects within a list.

```json
data: {
  name: 'Purple Cobras',
  members: [
    {
      name: 'Josh',
      shirt_number: 7,
      birthday: '21/03/1988'
    },
    {
      name: 'John',
      shirt_number: 21,
      birthday: '18/05/1973'
    },
    {
      name: 'James',
      shirt_number: 9,
      birthday: '19/11/1983'
    },
  ]
}
```

--------------------------------

### Alternative File Storage Folder

Source: https://laraform.io/docs/1.x/how-tos/uploading-files

Example of setting a different folder name for storing uploaded files. This configuration overrides the default 'files' folder.

```php
/*
|--------------------------------------------------------------------------
| Store
|--------------------------------------------------------------------------
|
| Default location to store uploaded files.
|
*/
'store' => [
    'disk' => 'public',
    'folder' => 'uploads'
]
```

--------------------------------

### Install Vue Recaptcha Package

Source: https://laraform.io/docs/1.x/how-tos/creating-element

Install the `vue-recaptcha` package using npm to integrate Google reCAPTCHA into your custom element.

```bash
$ npm install --save vue-recaptcha
```

--------------------------------

### Simplified TextElement Template Example

Source: https://laraform.io/docs/1.x/basics/style-and-theme

Illustrates how a schema-defined class is applied to the outermost container in a simplified element template.

```html
<template>
  <div class="element-container" :class="schema.class">
    <div class="element-inner">
      <div class="label-container">
        <label :for="name">{{ label }}</label>
      </div>
      <div class="field-container">
        <input v-model="model" type="text" />
      </div>
    </div>
  </div>
</template>
```

--------------------------------

### Install npm Dependencies

Source: https://laraform.io/docs/1.x/installation

Install required peer dependencies for the Laraform Vue package before installing Laraform itself.

```bash
$ npm install axios lodash moment vue@2 --save-dev
```

--------------------------------

### Basic Gallery Usage

Source: https://laraform.io/docs/1.x/reference/gallery-element

Renders a multi-image uploader with default settings. This is the most basic implementation.

```html
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        gallery: {
          type: 'gallery'
        }
      }
    })
  }
</script>
```

--------------------------------

### Using Addon

Source: https://laraform.io/docs/1.x/reference/password-element

Renders a password input with an addon element before the input field.

```APIDOC
### Examples
**Using Addon**
Renders a password input with `before` addon.
```javascript
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        password: {
          type: 'password',
          addon: {
            before: '<svg width="12" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="lock-alt" class="svg-inline--fa fa-lock-alt fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zM264 392c0 22.1-17.9 40-40 40s-40-17.9-40-40v-48c0-22.1 17.9-40 40-40s40 17.9 40 40v48zm32-168H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"></path></svg>'
          }
        }
      }
    })
  }
</script>
```
```

--------------------------------

### Basic Usage

Source: https://laraform.io/docs/1.x/reference/slider-element

Renders a simple slider with default settings.

```APIDOC
## Slider Element

An element used to render slider with vue-slider-component

### Basic Usage

Renders a slider.

```javascript
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        slider: {
          type: 'slider'
        }
      }
    })
  }
</script>
```
```

--------------------------------

### Basic Usage

Source: https://laraform.io/docs/1.x/reference/image-element

Renders a standard image uploader.

```APIDOC
## Basic Usage
Renders an image uploader.
```javascript
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        image: {
          type: 'image'
        }
      }
    })
  }
</script>
```
```

--------------------------------

### Bootstrap 4 Theme Override Example

Source: https://laraform.io/docs/1.x/basics/style-and-theme

This example shows how to override a default Laraform SCSS variable, such as `$lf-primary-color`, with a Bootstrap 4 variable (`$primary`). This is typically done in a theme's SCSS file.

```scss
// ./path/to/bs4/scss/theme.scss

//== Genaral
//
//## Font sizes, colors, backgrounds and more.

$lf-primary-color: $primary !default;

```

--------------------------------

### Vue Component Structure

Source: https://laraform.io/docs/1.x/how-tos/dynamic-form-loading

Example of a Vue component that includes a form component.

```html
<template>
  <div class="login-page">
    <login-form/>
  </div>
</template>

<script>
  export default {
    name: 'LoginPage',
    // ...
  }
</script>
```

--------------------------------

### Options

Source: https://laraform.io/docs/1.x/reference/textarea-element

Lists the available options for configuring the textarea element, including autogrow, rows, default values, placeholders, and more.

```APIDOC
## Options
Name | Type | Description  
---|---|---  
**autogrow** | `boolean` | Whether the textarea should grow automatically as user inserts new lines.  
**rows** | `number` | Initial number of rows of the textarea.  
**default** | `string` | Value of element when the form is initially loaded or reseted.  
**placeholder** | `string` | The placeholder of the element.  
**floating** | `string` | The floating label of the element.  
**disabled** | `boolean` | Whether the field is _disabled_.  
**readonly** | `boolean` | Whether the field is _readonly_.
```

--------------------------------

### Basic Usage

Source: https://laraform.io/docs/1.x/reference/radio-element

Demonstrates how to render a basic radio button and variations with default values and disabled states.

```APIDOC
## Radio Element - Basic Usage

Render a radio button.

```javascript
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        radio: {
          type: 'radio',
          text: 'Radio button'
        },
        radio2: {
          type: 'radio',
          text: 'Radio button',
          default: 1
        },
        radio3: {
          type: 'radio',
          text: 'Radio button',
          disabled: true
        },
        radio4: {
          type: 'radio',
          text: 'Radio button',
          default: 1,
          disabled: true
        },
      }
    })
  }
</script>
```
```

--------------------------------

### Conditional Tab

Source: https://laraform.io/docs/1.x/basics/wizard-and-tabs

This example shows how to make the 'Product gallery' tab conditional, appearing only if the 'Has gallery' checkbox is checked.

```php
<?php

namespace App\Forms;

class ProductForm extends \Laraform
{
  public function tabs() {
    return [
      'product_details' => [
        'label' => 'Product details',
        'elements' => ['name', 'description', 'has_gallery']
      ],
      'product_gallery' => [
        'label' => 'Product gallery',
        'elements' => ['gallery'],

        // Product gallery conditions
        'conditions' => [
          ['has_gallery', true]
        ]
      ]
    ];
  }

  public function schema() {
    return [
      'name' => [
        'type' => 'text',
        'label' => 'Product name'
      ],
      'description' => [
        'type' => 'text',
        'label' => 'Product description'
      ],
      'has_gallery' => [
        'type' => 'checkbox',
        'text' => 'Has gallery'
      ],
      'gallery' => [
        'type' => 'gallery',
        'label' => 'Gallery'
      ]
    ];
  }
}
    
```

--------------------------------

### Minify Assets with npm run prod

Source: https://laraform.io/docs/1.x/how-tos/optimization

Run the 'npm run prod' command to minify your project's assets, a standard practice for optimizing production builds.

```bash
$ npm run prod
```

--------------------------------

### Basic Usage

Source: https://laraform.io/docs/1.x/reference/file-element

Renders a standard file uploader component.

```APIDOC
## Basic Usage
Renders a file uploader.
```javascript
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        file: {
          type: 'file'
        }
      }
    })
  }
</script>
```
```

--------------------------------

### Basic Usage

Source: https://laraform.io/docs/1.x/reference/trix-element

Renders a standard Trix editor. This is the most straightforward way to implement the Trix Element.

```APIDOC
## Basic Usage
Renders a Trix editor.
```javascript
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        trix: {
          type: 'trix'
        }
      }
    })
  }
</script>
```
```

--------------------------------

### Basic Usage

Source: https://laraform.io/docs/1.x/reference/toggle-element

Renders a toggle with text next to it.

```APIDOC
## Basic Usage
Renders a toggle with text next to it.
```vue
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        toggle: {
          type: 'toggle',
          text: 'Remember me'
        }
      }
    })
  }
</script>
```
```

--------------------------------

### Basic Radio Button Usage

Source: https://laraform.io/docs/1.x/reference/radio-element

Renders a simple radio button with a text label. Includes examples for default values and disabled states.

```javascript
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        radio: {
          type: 'radio',
          text: 'Radio button'
        },
        radio2: {
          type: 'radio',
          text: 'Radio button',
          default: 1
        },
        radio3: {
          type: 'radio',
          text: 'Radio button',
          disabled: true
        },
        radio4: {
          type: 'radio',
          text: 'Radio button',
          default: 1,
          disabled: true
        },
      }
    })
  }
</script>
```

--------------------------------

### Configure npm Private Registry

Source: https://laraform.io/docs/1.x/installation

Add these lines to your project's .npmrc file to authenticate with the private npm registry. Replace YOUR_AUTH_TOKEN with your generated token.

```bash
@laraform:registry=https://npm.laraform.io
//npm.laraform.io/:_authToken="YOUR_AUTH_TOKEN"
```

--------------------------------

### Create Custom FormButton Component

Source: https://laraform.io/docs/1.x/how-tos/replacing-component

Extend the default FormButton component to create a custom version. This example assumes you are using the 'bs4' theme.

```vue
<script>
  import FormButton from '@laraform/laraform/src/themes/bs4/components/FormButton.vue'

  export default {
    mixins: [FormButton]
  }
</script>
```

--------------------------------

### Database Migration for Subscribers

Source: https://laraform.io/docs/1.x/basics/submitting-data

Create a database migration to add 'email' and 'ip' columns to the 'subscribers' table.

```php
public function up()
{
  Schema::create('subscribers', function (Blueprint $table) {
    $table->bigIncrements('id');
    $table->string('email');
    $table->string('ip');
    $table->timestamps();
  });
}
```

--------------------------------

### FormWizardStep Methods

Source: https://laraform.io/docs/1.x/reference/frontend-wizard-step

This section details the available methods for interacting with the FormWizardStep component.

```APIDOC
## Methods
#### # .on(event, callback)
###### Parameters
  * `event` string : event to listen for.
  * `callback` function : callback to run when the event is triggered. The `this` variable refers to the component the listener is set for.

Adds a listener for an event.
* * *
#### # .off(event)
###### Parameters
  * `event` string : event to remove the listeners for.

Removes all listeners for an event.
* * *
#### # .fire(event, args) @returns {any}
###### Parameters
  * `event` string : event to fire.
  * `args` object : arguments to pass for the event's listeners.

Fires an event.
* * *
#### # .__(expr, data) @returns {string}
###### Parameters
  * `expr` string : expression to be translated using `.` dot syntax.
  * `data` object : data to be passed for the expression

Translates an expression to current locale.
* * *
#### # .validate()
Validate the elements within the step.
* * *
#### # .proceed(callback)
###### Parameters
  * `callback` function : callback to call when the form is ready to proceed

Prepares to proceed to the next step. If validateOn contains 'step' it first validates any unvalidated element and wait for async validators to finish. Only continues no elements has `invalid` status.
* * *
#### # .activate()
Activates the step.
* * *
#### # .deactivate()
Deactivates the step.
* * *
#### # .enable()
Enables the step.
* * *
#### # .disable()
Disables the step.
* * *
#### # .complete()
Completes the step.
* * *
#### # .uncomplete()
Uncompletes the step.
* * *
#### # .select()
Selects the step to become the active step.
* * *
```

--------------------------------

### Add Global Theme

Source: https://laraform.io/docs/1.x/basics/configuration

Register a custom theme globally by specifying a name and the theme object.

```javascript
import Laraform from '@laraform/laraform'
import CustomTheme from './path/to/CustomTheme.vue'

Laraform.theme('custom', CustomTheme)
```

--------------------------------

### Adding a New Locale

Source: https://laraform.io/docs/1.x/basics/internationalization

Add a new locale to Laraform by calling the `.locale()` method with the locale name and its translation object before installing the Laraform plugin.

```javascript
import Vue from 'vue'
import Laraform from '@laraform/laraform'
import fr_FR from './path/to/fr_FR'

Laraform.locale('fr_FR', fr_FR)

Vue.use(Laraform)

const app = Vue({
  el: '#app'
})
```

--------------------------------

### Basic Checkbox Usage

Source: https://laraform.io/docs/1.x/reference/checkbox-element

Renders a simple checkbox option. Includes examples for a default unchecked, default checked, disabled, and disabled checked checkbox.

```javascript
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        checkbox: {
          type: 'checkbox',
          text: 'Check'
        },
        checkbox2: {
          type: 'checkbox',
          text: 'Check',
          default: true
        },
        checkbox3: {
          type: 'checkbox',
          text: 'Check',
          disabled: true
        },
        checkbox4: {
          type: 'checkbox',
          text: 'Check',
          default: true,
          disabled: true
        },
      }
    })
  }
</script>
```

--------------------------------

### getWizard()

Source: https://laraform.io/docs/1.x/reference/backend-laraform

Returns the form wizard configuration.

```APIDOC
## getWizard()

### Description
Returns the form wizard configuration.

### Returns
- `array`: The form wizard configuration.
```

--------------------------------

### Create and Configure Vuex Store

Source: https://laraform.io/docs/1.x/how-tos/using-vuex

Instantiate a Vuex store and register it with Laraform and Vue. This sets up the global state management for your forms.

```javascript
import Vue from 'vue'
import Vuex from 'vuex'
import Laraform from '@laraform/laraform'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    forms: {
      changePassword: {}
    }
  },
  // ...
})

Laraform.store(store)

Vue.use(Laraform)

const app = new Vue({
  el: '#app',
  store
})
```

--------------------------------

### Customize Textarea Element setData Method

Source: https://laraform.io/docs/1.x/how-tos/creating-element

Extend the base TextareaElement to override the `setData` method, for example, to strip HTML tags from the input data.

```php
<?php

namespace App\Elements;

use Laraform\Elements\TextareaElement as TextareaElementBase;

class TextareaElement extends TextareaElementBase
{
    public function setData($data)
    {
        $this->data = strip_tags($data);
    }
}
```

--------------------------------

### Regex Validation Example

Source: https://laraform.io/docs/1.x/basics/validation

Use the regex rule to validate input against a specific pattern. When using pipe characters in the pattern, define rules as an array.

```php
'rules' => 'not_regex:/^.+$/i'
```

```php
'rules' => 'regex:/^.+$/i'
```

--------------------------------

### With Labels

Source: https://laraform.io/docs/1.x/reference/toggle-element

Renders labels for the toggle using the `labels` option.

```APIDOC
## With labels
Renders labels for the toggle using `labels` option.
```vue
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        toggle: {
          type: 'toggle',
          labels: {
            checked: 'On',
            unchecked: 'Off',
          }
        }
      }
    })
  }
</script>
```
```

--------------------------------

### Basic Usage

Source: https://laraform.io/docs/1.x/reference/avatar-element

Demonstrates the default behavior of the Avatar element, showing a placeholder image that is replaced upon upload and allows for larger previews.

```APIDOC
## Avatar Element

An element used for profile images.

### Basic Usage
By default a placeholder image is shown which is replaced by the actual image, once uploaded. Clicking the uploaded image triggers it's larger preview.
```javascript
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        avatar: {
          type: 'avatar'
        }
      }
    })
  }
</script>
```
```

--------------------------------

### Tags Input with Create Option

Source: https://laraform.io/docs/1.x/reference/tags-element

Enables users to create new tags on the fly by setting the `create` option to `true`. Useful when predefined tags are not exhaustive.

```javascript
          
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        tags: {
          type: 'tags',
          items: {
            apple: 'Apple',
            cherry: 'Cherry',
            orange: 'Orange'
          },
          create: true
        }
      }
    })
  }
</script>
          
        
```

--------------------------------

### Basic Usage

Source: https://laraform.io/docs/1.x/reference/time-element

Renders a standard time input field.

```APIDOC
## Basic Usage
Renders a time input.

### Code Example
```javascript
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        time: {
          type: 'time',
          default: moment(new Date()).format('HH:mm')
        }
      }
    })
  }
</script>
```
```

--------------------------------

### Nested List Example

Source: https://laraform.io/docs/1.x/reference/list-element

Nests two object lists to create a hierarchical data structure. The outer list contains 'venue' and an inner 'events' list.

```javascript
export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        list: {
          type: 'list',
          label: 'Schedule',
          object: {
            schema: {
              venue: {
                type: 'text',
                label: 'Venue',
                placeholder: 'Venue name',
                floating: 'Venue name'
              },
              events: {
                type: 'list',
                label: 'Events',
                object: {
                  schema: {
                    name: {
                      type: 'text',
                      placeholder: 'Event name',
                      floating: 'Event name'
                    },
                    starts: {
                      type: 'text',
                      placeholder: 'Starts at',
                      floating: 'Starts at'
                    }
                  }
                }
              }
            }
          },
          default: [
            {
              venue: 'Riverside',
              events: [
                {
                  name: 'Ceremony opener',
                  starts: '19:00'
                },
                {
                  name: 'Announcement',
                  starts: '20:00'
                },
              ]
            }
          ]
        }
      }
    })
  }
```

--------------------------------

### Basic Usage

Source: https://laraform.io/docs/1.x/reference/password-element

Renders a standard password input field.

```APIDOC
## Password Element
An element used to render a password input.

### Examples
**Basic Usage**
Renders a password input.
```javascript
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        password: {
          type: 'password'
        }
      }
    })
  }
</script>
```
```

--------------------------------

### Nested Object Elements

Source: https://laraform.io/docs/1.x/reference/object-element

Nest multiple 'object' elements to create complex, hierarchical data structures. This example shows nested 'personal' and 'contact' information.

```javascript
export default {
  mixins: [Laraform],
  data: () => ({
    schema: {
      personal: {
        type: 'object',
        label: 'Personal Information',
        schema: {
          name: {
            type: 'object',
            schema: {
              firstname: {
                type: 'text',
                placeholder: 'First name',
                floating: 'First name',
                columns: 6
              },
              lastname: {
                type: 'text',
                placeholder: 'Last name',
                floating: 'Last name',
                columns: 6
              }
            }
          },
          profession: {
            type: 'text',
            placeholder: 'Profession',
            floating: 'Profession'
          }
        }
      },
      contact: {
        type: 'object',
        label: 'Contact Information',
        schema: {
          contacts: {
            type: 'object',
            schema: {
              email: {
                type: 'text',
                placeholder: 'Email',
                floating: 'Email',
                columns: 6
              },
              phone: {
                type: 'text',
                placeholder: 'Phone',
                floating: 'Phone',
                columns: 6
              }
            }
          },
          address: {
            type: 'text',
            placeholder: 'Address',
            floating: 'Address'
          }
        }
      }
    }
  })
}
```

--------------------------------

### Basic Object Element Usage

Source: https://laraform.io/docs/1.x/reference/object-element

Use the 'object' type to create a wrapper element for related fields. This example demonstrates grouping 'firstname' and 'lastname' fields.

```javascript
export default {
  mixins: [Laraform],
  data: () => ({
    schema: {
      name: {
        type: 'object',
        label: 'Name',
        schema: {
          firstname: {
            type: 'text',
            placeholder: 'First name',
            floating: 'First name',
            columns: 6
          },
          lastname: {
            type: 'text',
            placeholder: 'Last name',
            floating: 'Last name',
            columns: 6
          },
        }
      }
    }
  })
}
```

--------------------------------

### Create Vue Component for Custom Element

Source: https://laraform.io/docs/1.x/how-tos/creating-element

Define the frontend component for your custom element, including its template and script logic. This example shows a Recaptcha element.

```vue
<template>
  <component :is="theme.components.BaseElementLayout"
    :el$="el$"
  >
    <template slot="field">
      <slot name="prefix"></slot>

      <vue-recaptcha
        :sitekey="sitekey"
        :loadRecaptchaScript="true"
        @verify="handleVerify"
        @expired="handleExpired"
        @error="handleError"
      />

      <slot name="suffix"></slot>
    </template>

    <slot slot="label" name="label" :el$="el$"></slot>
    <slot slot="info" name="info" :el$="el$"></slot>
    <slot slot="before" name="before" :el$="el$"></slot>
    <slot slot="between" name="between" :el$="el$"></slot>
    <slot slot="error" name="error" :el$="el$"></slot>
    <slot slot="after" name="after" :el$="el$"></slot>
  </component>
</template>

<script>
  import BaseElement from '@laraform/laraform/src/mixins/BaseElement'
  import BaseValidation from '@laraform/laraform/src/mixins/BaseValidation'
  import VueRecaptcha from 'vue-recaptcha'

  export default {
    name: 'RecaptchaElement',
    mixins: [BaseElement, BaseValidation],
    components: {
      VueRecaptcha,
    },
    computed: {
      sitekey() {
        return this.schema.sitekey
      }
    },
    methods: {
      handleVerify(response) {
        this.update(response)
        this.validate()
      },
      handleExpired() {
        this.update(null)
        this.validate()
      },
      handleError() {
        this.update(null)
        this.validate()
      },
    }
  }
</script>
```

--------------------------------

### Multilingual Validation Rules

Source: https://laraform.io/docs/1.x/basics/validation

Define different validation rules for each language when working with multilingual form elements. This example shows a 'required' rule for English titles.

```php
<?php

namespace App\Forms;

class TranslatableForm extends \Laraform
{
  public $multilingual = true;

  public $languages = [
    'en' => [
      'code' => 'en',
      'label' => 'English'
    ],
    'de' => [
      'code' => 'de',
      'label' => 'German'
    ]
  ];

  public function schema() {
    return [
      'title' => [
        'type' => 't-text',
        'label' => 'Title',
        'rules' => [
          'en' => 'required',
        ]
      ],
    ];
  }
}
```

--------------------------------

### Basic Multifile Uploader

Source: https://laraform.io/docs/1.x/reference/multifile-element

Renders a standard multifile uploader. This is the default configuration.

```javascript
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        multifile: {
          type: 'multifile'
        }
      }
    })
  }
</script>
```

--------------------------------

### Define Basic Form Schema

Source: https://laraform.io/docs/1.x/basics/customizing-layout

This script defines a basic form schema with 'name', 'email', and 'phone' fields. It's the starting point before customizing the layout.

```javascript
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        name: {
          type: 'text',
          label: 'Name'
        },
        email: {
          type: 'text',
          label: 'Email'
        },
        phone: {
          type: 'text',
          label: 'Phone'
        }
      }
    })
  }
</script>
```

--------------------------------

### Compile Assets

Source: https://laraform.io/docs/1.x/basics/rendering

Compile your frontend assets using npm to make your form visible on the site.

```bash
npm run dev
```

--------------------------------

### Add onClick Handler to Button in Vue

Source: https://laraform.io/docs/1.x/how-tos/extending-on-frontend

Extend a button defined in the backend with custom frontend behavior using the 'onClick' option. This example adds a reset functionality.

```javascript
<script>
  export default {
    mixins: [Laraform],
    data() {
      return {
        schema: {
          // ...
        },
        buttons: [
          // Submit button - nothing added
          {},

          // Reset button
          {
            onClick() {
              this.form$.reset()
            }
          }
        ]
      }
    }
  }
</script>
```

--------------------------------

### Basic Usage

Source: https://laraform.io/docs/1.x/reference/radiogroup-element

Renders a group of radio buttons with predefined items and a default selection.

```APIDOC
## Radio Group Element - Basic Usage

### Description
Renders a group of radio buttons.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Request Example
```javascript
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        radiogroup: {
          type: 'radiogroup',
          items: {
            apple: 'Apple',
            cherry: 'Cherry',
            orange: 'Orange'
          },
          default: 'cherry',
          disable: ['orange'],
        }
      }
    })
  }
</script>
```

### Response
N/A (Component Usage)
```

--------------------------------

### Options

Source: https://laraform.io/docs/1.x/reference/radiogroup-element

Lists the available options for configuring the Radio Group Element.

```APIDOC
## Radio Group Element - Options

### Description
Lists the available options for configuring the Radio Group Element.

### Options

| Name | Type | Description |
|---|---|---|
| **items** | `object` | List of checkbox options. |
| **disable** | `array` | List of option keys to be disabled. |
| **disabled** | `boolean` | Whether the field is _disabled_. |
| **default** | `str|num` | Value of element when the form is initially loaded or reseted. |
```

--------------------------------

### Create Frontend Form Component

Source: https://laraform.io/docs/1.x/how-tos/dynamic-form-loading

A basic example of a custom form component that utilizes the Laraform mixin. Ensure your form component extends Laraform to inherit its functionality.

```vue
<script>
  export default {
    mixins: [Laraform],
    mounted() {
      console.log('LoginForm is mounted')
    }
  }
</script>
```

--------------------------------

### Override TextareaElement Template

Source: https://laraform.io/docs/1.x/how-tos/creating-element

Extend the default TextareaElement template to customize its HTML structure. This example shows how to override the template to include custom slots and modify the textarea element itself.

```html
<template>
  <component :is="theme.components.BaseElementLayout"
    :el$="el$"
  >
    <template slot="field">

      <slot name="prefix"></slot>

      <component :is="theme.components.ElementLabelFloating"
        v-if="floating"
        :visible="!empty"
      >{{ floating }}</component>

      <textarea
        v-model="model"
        :name="name"
        :id="id"
        :class="theme.classes.textarea"
        :placeholder="placeholder"
        :disabled="disabled"
        :readonly="readonly"
        :rows="rows"
        @keyup="handleKeyup"
        ref="textarea"
      />

      <slot name="suffix"></slot>

    </template>

    <slot slot="label" name="label" :el$="el$"></slot>
    <slot slot="before" name="before" :el$="el$"></slot>
    <slot slot="between" name="between" :el$="el$"></slot>
    <slot slot="error" name="error" :el$="el$"></slot>
    <slot slot="after" name="after" :el$="el$"></slot>
  </component>
</template>

<script>
  import TextareaElement from '@laraform/laraform/src/themes/bs4/components/elements/TextareaElement'

  export default {
    mixins: [TextareaElement],
    mounted() {
      alert('Custom TextareaElement is mounted')
    }
  }
</script>

```

--------------------------------

### Extend Theme Styles with Variables

Source: https://laraform.io/docs/1.x/how-tos/creating-theme

Customize theme styles by adding custom variables and styles after importing default Laraform SCSS files. This example sets a primary color.

```scss
.my-theme {
  @import '~laraform/src/themes/bs4/scss/vars';
  @import '~laraform/src/themes/bs4/scss/mixins';
  @import '~laraform/src/themes/bs4/scss/components';

  $lf-primary-color: #00aaff;

  background-color: #f5f7f9;
}
```

--------------------------------

### getTheme()

Source: https://laraform.io/docs/1.x/reference/backend-laraform

Returns the form theme.

```APIDOC
## getTheme()

### Description
Returns the form theme.

### Returns
- `string`: The form theme.
```

--------------------------------

### Before List Slot

Source: https://laraform.io/docs/1.x/reference/select-element

Component to be rendered before the option list.

```APIDOC
#### # beforeList 
###### Props
  * `el$` object : The element component.

Component to be rendered before the option list.
```

--------------------------------

### Extending the Rule Class

Source: https://laraform.io/docs/1.x/how-tos/creating-rule

Create a custom validation rule by extending the base `Rule` class. Implement the `validate(value)` method for logic and `get message()` for error messages.

```javascript
import Rule from '@laraform/laraform/src/utils/validation/rules/rule'

export default class extends Rule {
  // ...
}
```

--------------------------------

### Frontend Form Component with Laraform Mixin

Source: https://laraform.io/docs/1.x/basics/submitting-data

Create a Vue.js component that uses the Laraform mixin to integrate with Laraform backend forms. The `created` hook can be used for initial setup.

```javascript
<script>
  export default {
    mixins: [Laraform],
    created() {
      alert('Form is created')
    }
  }
</script>
```

--------------------------------

### Globally Registering a Custom Rule

Source: https://laraform.io/docs/1.x/how-tos/creating-rule

Register a custom validation rule globally using `Laraform.rule()` before installing the Vue plugin. This makes the rule available by its registered name across all forms.

```javascript
import Vue from 'vue'
import Laraform from '@laraform/laraform'
import Uppercase from './path/to/uppercase'

Laraform.rule('uppercase', Uppercase)

Vue.use(Laraform)

const app = new Vue({
  el: '#app'
})
```

--------------------------------

### Use 'before' Hook to Set IP Address

Source: https://laraform.io/docs/1.x/basics/submitting-data

Utilize the 'before' hook to automatically populate a 'meta' field with the user's IP address before the data is saved.

```php
class NewsletterForm extends \Laraform
{
  public $model = \App\Subscriber::class;

  public function schema() {
    return [
      'email' => [
        'type' => 'text',
        'placeholder' => 'Email address'
      ],
      'ip' => [
        'type' => 'meta'
      ]
    ];
  }

  public function buttons() {
    // ...
  }

  public function before() {
    $this->data['ip'] = \Request::ip();
  }
}
```

--------------------------------

### Handling 'fail' and 'success' Events

Source: https://laraform.io/docs/1.x/basics/submitting-data

Differentiate between successful and failed submissions by subscribing to the `fail` and `success` events. The `success` event handler includes an example of resetting the form using `this.reset()`.

```javascript
export default {
  mixins: [Laraform],
  created() {
    this.on('fail', (response) => {
      alert('Failed: ' + response.data.messages[0])
    })

    this.on('success', (response) => {
      alert('Successful: ' + response.data.messages[0])

      // Resetting the form
      this.reset()
    })
  }
}
```

--------------------------------

### Basic List Usage

Source: https://laraform.io/docs/1.x/reference/list-element

Renders a repeatable list of text elements. Use the `element` option to define the type of input for each list item.

```javascript
export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        list: {
          type: 'list',
          label: 'To-do',
          element: {
            type: 'text',
            placeholder: 'Write here...'
          },
          default: [
            'Write docs',
            'Create unit tests',
            'Set up npm',
          ]
        }
      }
    })
  }
```

--------------------------------

### Custom Events with .on() and .fire()

Source: https://laraform.io/docs/1.x/basics/events-and-hooks

Create and manage custom events for elements using .on() to register callbacks and .fire() to trigger them. This example shows custom 'checked' and 'unchecked' events for a checkbox.

```javascript
schema: {
  terms: {
    type: 'checkbox',
    text: 'Accept Terms and Conditions',
    created() {
      this.on('checked', () => {
        console.log('Checkbox was checked')
      })

      this.on('unchecked', () => {
        console.log('Checkbox was unchecked')
      })

      this.on('change', () => {
        if (this.value == true) {
          this.fire('checked')
        } else {
          this.fire('unchecked')
        }
      })
    }
  }
}
```

--------------------------------

### Implementing an Async Validation Rule

Source: https://laraform.io/docs/1.x/how-tos/creating-rule

Create an asynchronous validation rule by setting the `get async()` getter to `true` and using `async/await` within the `validate()` method to handle promises, such as HTTP requests.

```javascript
import Rule from '@laraform/laraform/src/utils/validation/rules/rule'

export default class Remote extends Rule {
  get async() {
    return true
  }

  async validate(value) {
    var response = await axios.get('/endpoint-to-check?value=' + value)

    return response.data.valid
  }
}
```

--------------------------------

### Gallery with Custom Preview

Source: https://laraform.io/docs/1.x/reference/gallery-element

Implements a custom preview for uploaded images using the `preview` slot. This allows for custom rendering of each image, including actions like removal.

```html
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        gallery: {
          type: 'gallery',
          slots: {
            preview: Vue.extend({
              props: ['el$', 'remove', 'preview'],
              template: `
              <div>
                <img :src="el$.file.preview" @click.prevent="preview" width="120" /> 
                <a href="" @click.prevent="remove">Remove</a>
              </div>
              `
            })
          }
        }
      }
    })
  }
</script>
```

--------------------------------

### Use Custom Backend Rule in Laraform Schema

Source: https://laraform.io/docs/1.x/how-tos/creating-rule

Integrate a custom backend validation rule into your Laraform schema. This example shows how to use the `Uppercase` rule alongside frontend rules for the 'shout' field.

```php
<?php

namespace App\Forms;

use App\Rules\Uppercase;

class ValidationForm extends \Laraform
{
  public function schema() {
    return [
      'shout' => [
        'type' => 'text',
        'label' => 'Shout here',
        'rules' => [
          // Using 'uppercase' frontend rule from previous example
          'frontend' => ['required', 'uppercase'],

          // Using our custom backend Uppercase rule
          'backend' => ['required', new Uppercase],
        ]
      ]
    ]
  }
}

```

--------------------------------

### Basic Avatar Usage

Source: https://laraform.io/docs/1.x/reference/avatar-element

Demonstrates the default behavior of the avatar element, showing a placeholder that is replaced by the uploaded image. Clicking the image opens a larger preview.

```html
<script>
  export default {
    mixins: [Laraform],
    data: () => ({
      schema: {
        avatar: {
          type: 'avatar'
        }
      }
    })
  }
</script>
```
Tokens:
Raw