PageSourceSearch

https://easypanel.netlify.app/inputs/

html easypanel.netlify.app collected 2026-10-03 10:40:42 UTC 60,840 bytes, 160 lines download raw bytes

1<!DOCTYPE html>
2<html data-html-server-rendered="true" lang="en" data-vue-tag="%7B%22lang%22:%7B%22ssr%22:%22en%22%7D%7D">
3  <head>
4    <title>Inputs - Laravel EasyPanel</title><meta name="gridsome:hash" content="79ad2d364ec297ef2551b97fadf7e5fcac02a5f7"><meta data-vue-tag="ssr" charset="utf-8">
5<!-- This site is hosted on Netlify. Anyone can build and deploy a site
6     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=2edd368f-5240-4443-bcbd-b6d82ab5b4e8
7     Netlify hosting facts for this site: static/SSR served via Netlify Edge. --><meta data-vue-tag="ssr" name="generator" content="Gridsome v0.7.11"><meta data-vue-tag="ssr" data-key="viewport" name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><meta data-vue-tag="ssr" data-key="format-detection" name="format-detection" content="telephone=no"><meta data-vue-tag="ssr" name="theme-color" content="#4E56A6"><meta data-vue-tag="ssr" name="google-site-verification" content="undefined"><meta data-vue-tag="ssr" name="apple-mobile-web-app-status-bar-style" content="default"><meta data-vue-tag="ssr" data-key="description" name="description" content="undefined"><link data-vue-tag="ssr" rel="icon" href="data:,"><link data-vue-tag="ssr" rel="icon" type="image/png" sizes="16x16" href="/assets/static/favicon.ce0531f.d0c61709712bc3a64c116091dde6f820.png"><link data-vue-tag="ssr" rel="icon" type="image/png" sizes="32x32" href="/assets/static/favicon.ac8d93a.d0c61709712bc3a64c116091dde6f820.png"><link data-vue-tag="ssr" rel="icon" type="image/png" sizes="96x96" href="/assets/static/favicon.b9532cc.d0c61709712bc3a64c116091dde6f820.png"><link data-vue-tag="ssr" rel="apple-touch-icon" type="image/png" sizes="76x76" href="/assets/static/favicon.f22e9f3.d0c61709712bc3a64c116091dde6f820.png"><link data-vue-tag="ssr" rel="apple-touch-icon" type="image/png" sizes="152x152" href="/assets/static/favicon.62d22cb.d0c61709712bc3a64c116091dde6f820.png"><link data-vue-tag="ssr" rel="apple-touch-icon" type="image/png" sizes="120x120" href="/assets/static/favicon.1539b60.d0c61709712bc3a64c116091dde6f820.png"><link data-vue-tag="ssr" rel="apple-touch-icon" type="image/png" sizes="167x167" href="/assets/static/favicon.dc0cdc5.d0c61709712bc3a64c116091dde6f820.png"><link data-vue-tag="ssr" rel="apple-touch-icon" type="image/png" sizes="180x180" href="/assets/static/favicon.7b22250.d0c61709712bc3a64c116091dde6f820.png"><link data-vue-tag="ssr" rel="manifest" href="/manifest.json"><link rel="preload" href="/assets/css/0.styles.8581b417.css" as="style"><link rel="preload" href="/assets/js/app.5f2318c4.js" as="script"><link rel="preload" href="/assets/js/page--src--templates--doc-vue.c9b7ae84.js" as="script"><link rel="prefetch" href="/assets/js/page--node-modules--gridsome--app--pages--404-vue.8f2a916a.js"><link rel="prefetch" href="/assets/js/page--src--pages--index-vue.3385d69c.js"><link rel="stylesheet" href="/assets/css/0.styles.8581b417.css"><noscript data-vue-tag="ssr"><style>.g-image--loading{display:none;}</style></noscript>
8  </head>
9  <body >
10    <div data-server-rendered="true" id="app" class="site" data-v-911841cc data-v-b32654a2><header class="header" data-v-57449993 data-v-911841cc><a href="/" title="Back to home" class="logo active" data-v-69568d74 data-v-57449993><!----><div data-v-69568d74 data-v-69568d74><img alt="logo" src="data:image/svg+xml,%3csvg fill='none' viewBox='0 0 800 248' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cdefs%3e%3cfilter id='__svg-blur-0'%3e%3cfeGaussianBlur in='SourceGraphic' stdDeviation='40'/%3e%3c/filter%3e%3c/defs%3e%3cimage x='0' y='0' filter='url(%23__svg-blur-0)' width='800' height='248' xlink:href='data:image/png%3bbase64%2ciVBORw0KGgoAAAANSUhEUgAAAEAAAAAUCAYAAAA9djs/AAAACXBIWXMAAC4jAAAuIwF4pT92AAAHZklEQVRYw%2b1Xa1BUZRj%2bzll1zKmsJiumLB2HzMomHTXHJu2HVmrklIKCLHIVAUG5LuxyjQARb2WammhGosveueyyuIASiCiOaFc1s340xVRaouw5B3V7zncOB3D3RzP6o2n4Zs6c77zvd3nf533e9/sOIcNtuA03sa1ababvxLQ6snSlnl268jD7XshhdvmqKnZtai3VRcVb72qP69/%2b
10SoRsaQ0hx8YIaUZWSDGwQpqB5QvrGFHel1BJuH1td%2b0P/36N9C62EyEVe2hMrHvvl7Ku1vekMBkEX211ou2egS3ofAMpZBiZwcbfPQjejvZ%2b0eF78Lp0O33nftD0cMQayxtgREBYjDkgMs4akJpV/6Co0xW4yLJQPft24EFVoFrPFm44SuccMnxFgiMMbADk7wRVqkIijOzFy3%2bQTz87Q9TRJnbNOsmh8DUWZmeKjaXGbXT6gQVvCVrrYiHbFsB92PgEBUFrYdAXwVD1JR1W4ZvttZ3tB47hi%2byMkGlmhWS9iv9AYo3YuDInI6RWqfrWQ55XzXDbmyQQSusfxBqLhNzqWdebzrPS2AZvAILDDVQZnWALAPWvLw%2brMgaG6m0hkUZzssYxQdT5TdroNe/7i7//q2ggfZgh0c40a4R04xVeY/oczh4Vssxtbn3nGF9zPaIj%2bdWMT9akVBE%2b2%2bqlQ1qpqLMb6yeA/la6V7H9cQoK0s8bgAgJAER8GfqHfG3mav5RFRFnUYdGmzIxLtDj8bD9OkR5AeQpSKM0gLgYOrJtRwfqR92cdJ2TOpaUbp%2bozbBPp0ZkmgsQmTKx34N1AEILn2ubSo3%2bqPERPr8mjtdZNIjyQoXSGxxTuE%2bOTuRzq%2bdj7DowZVy/zl3e9jBkcXyONZ0vcbxMQQAjFECyzJ0A6mm6jg/AFACiEqxLEPn2FeGG12LW2p4UZXCCGVQnkpAGeStWGc6Ex1rWi7K49bXzwJie4AjjRuhKAcSRVK3zqdNd3aOw7jfRCVZ/cZw6xqxVg1G0IGaai2DUFmpQ%2bfHRAKAd1H2R5qnlzP1IjxzICsGU8wBhsexEyS2N2YO3HToHAKRJ7q48eZ%2bgszQJGSYDIr0Z%2bu8BFgXaM7MALHCOETJNP8DxCf1p1lvzlW8A4PRCpMCf%2bG6KT655U5SFRplU8gnxLOQ65HgsQGoFSJ/I8klIldMro4yWhJTaV0WZamwBI6/rRC2JEvuY54qKMSVSJzXmdDhxBYbbYPApPA29VZ2jKSBF9jn4zkXOJ2LM1xiTIqWNaRPoTBPY/VHjowDnGzo%2b1/YC%2bj9zm4/49zRfGIMxTl5r0Ym6m0G7WHnMp3xh7UO0X%2bLwpnfIQAoshdF6XykAJ7%2bEbi8cUgeFVTUBgJ2D9WBELGrJOTBgX396oKCGiCBk5DRMA2vOHys/8YCcAjoYbUR0pyAyc927jo2l9N/R/Bgc/lpMD8ij4UyXoDVr5Mhtg07qZ1snYX6X7NxkAPU7QLNAZsOcZr6gZoFSIEvrZ%2bD7IL%2bhfrbMJOZG2%2bWhzq2Qi2BkvHUZonsKzj4XqK6aAWenrUmqHi1H8yLkS7T5jWNxPzgKEMwya14CvdWRcbZxKHaLsVa3tsA1XtRV6M/dhzmtGNuNE0E3qAhugCHbvY6u0vpJcPQSojWTL3ZMxLgf8JTKhu/GUyYVMut4OPoj57owkiux%2b0H%2bC%2bpGKOrDdNwp5rj3H79fWTOv2oBnJ9LKJBVVf9SZpqEbh8eaKQCJqXWzgtT6djjogNHOlZFGJ2qAv1zJwyBvQyRdiHQDjrV1ojwhufZF0N%2b1fJWhEbWgBSxKF%2bWzX9%2bjkgvkGwC1Nyvf5acAkFcdDKNiaV9jGsltdTGeKTn9BmshOwHHXQCjHtELluUxeELkC85DiPw2bnuzxKiCmiDMaUEdqKEMKLa/pgBQWLsCwLjwVtPLVmwF4z7QfsdR4/Eob5G%2bnZ0/jeg4eXnEQKVfouivXr2hVNcHHi9SCmSl4dwo6BWd3XVJhToyDYyoQFrsF2Uz5perrs3bNOiImztwU%2bwYoOXfQp%2bKyDZJ49iB/ivFQ233Sx1Yo%2b7sqGuXukfcySw4rDDi72u877PaM2hDX23RexWKFeOeKWVHjs2XToYYM0CIV4BY%2bK40TgQPjpeJbMIR%2bKwoi0%2bSznPP1Hxye3K2cs6797TQ/g3Xd6Qv8jNln9sLtrCekbFSf9r7xDNbcv7Wko%2bJx1/HCFny1TpZz955d7j%2bF0cuwKeb4fvpnjfDypmrso/uva1DncvIdtJ3QUkzEe/%2b4pOQXENSMh1k%2b%2b4TVHegsgvf9eKxSLbuaCf5xc3K/LyiZoITgKzXOHADPE2qHRe8AHwn6KDS58pbCbdHuptzu46Rnht99E2NO3xKvNkRblMDcVecIG7534Db3YLzXjK813iaOsHtP06/e779jXDbXAT1gM51D/qf6D3YQXBCkH7aezl/r1tRmeTIrn2dZOLzW5jxkzcxqAE0CnPfLCfX3Lf/33%2bWp7q6ydRZH9O%2bJvcISdM1kAOHpPt86dZWMtyG23%2bn/QPMNSI%2b0iilxwAAAABJRU5ErkJggg==' /%3e%3c/svg%3e" width="800" data-src="/assets/static/logo.775f9c8.57240b887086ebf549093eff12709633.png" data-srcset="/assets/static/logo.82a2fbd.57240b887086ebf549093eff12709633.png 480w, /assets/static/logo.775f9c8.57240b887086ebf549093eff12709633.png 800w" data-sizes="(max-width: 800px) 100vw, 800px" class="g-image g-image--lazy g-image--loading" data-v-69568d74><noscript data-v-69568d74><img src="/assets/static/logo.775f9c8.57240b887086ebf549093eff12709633.png" class="g-image g-image--loaded" width="800" alt="logo"></noscript></div></a><nav class="nav" data-v-57449993><button id="themeSwitch" aria-label="Switch theme between light and dark" data-v-2a25ef95 data-v-57449993><!----><!----></button><button aria-label="Toggle the sidebar" class="toggle" data-v-def1a688 data-v-57449993><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="open feather feather-menu" data-v-def1a688 data-v-def1a688><line x1="3" y1="12" x2="21" y2="12" data-v-def1a688></line><line x1="3" y1="6" x2="21" y2="6" data-v-def1a688></line><line x1="3" y1="18" x2="21" y2="18" data-v-def1a688></line></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="close feather feather-x" style="display:none;" data-v-def1a688 data-v-def1a688><line x1="18" y1="6" x2="6" y2="18" data-v-def1a688></line><line x1="6" y1="6" x2="18" y2="18" data-v-def1a688></line></svg></button></nav></header>
10<aside class="sidebar" data-v-460eb486 data-v-911841cc><nav data-v-460eb486><ul data-v-460eb486><li class="section" data-v-460eb486><h3 class="section-title" data-v-460eb486>Introduction</h3><ul data-v-460eb486><li data-v-460eb486><a href="/getting-started" class="topic" data-v-460eb486>Getting started</a><!----><!----><!----><ul class="nested-list" data-v-460eb486><li data-v-460eb486><a href="/getting-started#what-is-easypanel" class="sub-topic" data-v-460eb486>What is EasyPanel</a></li><li data-v-460eb486><a href="/getting-started#installation" class="sub-topic" data-v-460eb486>Installation</a></li></ul><!----><!----></li><li data-v-460eb486><a href="/manage-administrators" class="topic" data-v-460eb486>Manage Administrators</a><!----><ul class="nested-list" data-v-460eb486><li data-v-460eb486><a href="/manage-administrators#authentication-strategy" class="sub-topic" data-v-460eb486>Authentication Strategy</a></li><li data-v-460eb486><a href="/manage-administrators#create-an-administrator" class="sub-topic" data-v-460eb486>Create an Administrator</a></li><li data-v-460eb486><a href="/manage-administrators#remove-an-administrator" class="sub-topic" data-v-460eb486>Remove an Administrator</a></li><li data-v-460eb486><a href="/manage-administrators#admin-list" class="sub-topic" data-v-460eb486>Admin List</a></li></ul><!----><!----><!----><!----></li></ul></li><li class="section" data-v-460eb486><h3 class="section-title" data-v-460eb486>CRUD Settings</h3><ul data-v-460eb486><li data-v-460eb486><a href="/component-structure" class="topic" data-v-460eb486>Component Structure</a><!----><!----><!----><!----><!----><ul class="nested-list" data-v-460eb486><li data-v-460eb486><a href="/component-structure#what-is-the-component" class="sub-topic" data-v-460eb486>What is the component</a></li><li data-v-460eb486><a href="/component-structure#how-to-create-a-component" class="sub-topic" data-v-460eb486>How to create a component</a></li><li data-v-460eb486><a href="/component-structure#component-methods" class="sub-topic" data-v-460eb486>Component Methods</a></li><li data-v-460eb486><a href="/component-structure#build-crud" class="sub-topic" data-v-460eb486>Build CRUD</a></li></ul></li><li data-v-460eb486><a href="/inputs" class="topic active--exact active" data-v-460eb486>Inputs</a><!----><!----><ul class="nested-list" data-v-460eb486><li data-v-460eb486><a href="/inputs#provide-inputs" class="sub-topic" data-v-460eb486>Provide Inputs</a></li><li data-v-460eb486><a href="/inputs#simple-inputs" class="sub-topic" data-v-460eb486>Simple inputs</a></li><li data-v-460eb486><a href="/inputs#inputs-but-pro" class="sub-topic" data-v-460eb486>Inputs, but pro!</a></li></ul><!----><!----><!----></li><li data-v-460eb486><a href="/fields" class="topic" data-v-460eb486>Fields</a><ul class="nested-list" data-v-460eb486><li data-v-460eb486><a href="/fields#what-is-a-field" class="sub-topic" data-v-460eb486>What is a field</a></li><li data-v-460eb486><a href="/fields#define-simple-fields" class="sub-topic" data-v-460eb486>Define simple fields</a></li><li data-v-460eb486><a href="/fields#control-your-fields" class="sub-topic" data-v-460eb486>Control Your Fields</a></li><li data-v-460eb486><a href="/fields#images" class="sub-topic" data-v-460eb486>Images</a></li><li data-v-460eb486><a href="/fields#badges" class="sub-topic" data-v-460eb486>Badges</a></li></ul><!----><!----><!----><!----><!----></li></ul></li><li class="section" data-v-460eb486><h3 class="section-title" data-v-460eb486>Configuration</h3><ul data-v-460eb486><li data-v-460eb486><a href="/configuration" class="topic" data-v-460eb486>Configuration</a><!----><!----><!----><!----><ul class="nested-list" data-v-460eb486><li data-v-460eb486><a href="/configuration#how-to-manage-configuration" class="sub-topic" data-v-460eb486>How to Manage Configuration</a></li><li data-v-460eb486><a href="/configuration#changing-language" class="sub-topic" data-v-460eb486>Changing Language</a></li></ul><!----></li></ul></li></ul><a target="_blank" href="https://github.com/rezaamini-ir/laravel-easypanel" title="Git-repository" aria-label="EasyPanel on Github" class="git small" data-v-9b5c2936 data-v-460eb48
106><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon feather feather-github" data-v-9b5c2936 data-v-9b5c2936><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" data-v-9b5c2936 data-v-9b5c2936></path></svg>
11  Project on Github
12</a></nav></aside><main class="main" data-v-911841cc><h1 data-v-911841cc data-v-b32654a2>
13    Inputs
14  </h1><div class="markdown" data-v-911841cc data-v-b32654a2><ul>
15<li><a href="#provide-inputs">Provide Inputs</a></li>
16<li>
17<p><a href="#provide-inputs">Simple inputs</a></p>
18<ul>
19<li><a href="#available-types">Available Types</a></li>
20</ul>
21</li>
22<li>
23<p><a href="#inputs-but-pro">Inputs, but pro!</a></p>
24<ul>
25<li><a href="#text">Text</a></li>
26<li><a href="#placeholder">Placeholder</a></li>
27<li><a href="#input-custom-style">Input custom style</a></li>
28<li><a href="#label-styles">Label styles</a></li>
29<li><a href="#autocomplete-input">Autocomplete input</a></li>
30<li><a href="#input-mode">Input Mode</a></li>
31</ul>
32</li>
33</ul>
34<h2 id="provide-inputs"><a href="#provide-inputs" aria-hidden="true"><span class="icon icon-link"></span></a>Provide Inputs</h2>
35<p>To provide inputs, you must define them into your CRUD component which has been located in <code class="language-text">app/CRUD/</code> directory.</p>
36<p>There is a method called <code class="language-text">inputs()</code> which allows you to define crud inputs for Create and Update page!</p>
37<h2 id="simple-inputs"><a href="#simple-inputs" aria-hidden="true"><span class="icon icon-link"></span></a>Simple inputs</h2>
38<p>You can easily pass your model property as key and input name as value to make a simple input for your CRUD.
39For example:</p>
40<pre class="language-php"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">inputs</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
41    <span class="token keyword">return</span> <span class="token punctuation">[</span>
42        <span class="token string single-quoted-string">'name'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'text'</span><span class="token punctuation">,</span>
43        <span class="token string single-quoted-string">'image'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'file'</span><span class="token punctuation">,</span>
44        <span class="token string single-quoted-string">'email'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'email'</span><span class="token punctuation">,</span>
45        <span class="token string single-quoted-string">'active'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'checkbox'</span><span class="token punctuation">,</span>
46        <span class="token string single-quoted-string">'expire_time'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'datetime'</span><span class="token punctuation">,</span>
47        <span class="token string single-quoted-string">'birth_day'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'date'</span><span class="token punctuation">,</span>
48        <span class="token string single-quoted-string">'notify_time'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'time'</span><span class="token punctuation">,</span>
49        <span class="token string single-quoted-string">'status'</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token string single-quoted-string">'select'</span> <span class="token operator">=></span> <span class="token punctuation">[</span>
50            <span class="token string single-quoted-string">'accepted'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Accepted :)'</span><span class="token punctuation">,</span>
51            <span class="token string single-quoted-string">'rejected'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Rejected :('</span><span class="token punctuation">,</span>
52            <span class="token string single-quoted-string">'pending'</span> <span class="token operator">=></span> <span class="token string single-quoted-string">'Pending!'</span><span class="token punctuation">,</span>
53        <span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
54    <span class="token punctuation">]</span><span class="token punctuation">;</span>
55<span class="token punctuation">}</span></pre>
56<p>And that's it! This code will generate a simple form that includes 4 inputs.</p>
57<h4 id="available-types"><a href="#available-types" aria-hidden="true"><span class="icon icon-link"></span></a>Available types</h4>
58<ul>
59<li>Ckeditor</li>
60<li>Checkbox</li>
61<li>Text</li>
62<li>Select</li>
63<li>File</li>
64<li>Password</li>
65<li>Number</li>
66<li>Email</li>
67<li>Date</li>
68<li>Datetime</li>
69<li>Time</li>
70<li>Textarea</li>
71</ul>
72<h2 id="inputs-but-pro"><a href="#inputs-but-pro" aria-hidden="true"><span class="icon icon-link"></span></a>Inputs, but pro!</h2>
73<p>You can create inputs as simple as possible as you want, but there is more customizability to make better inputs!</p>
74<p><strong>All of these inputs have <code class="language-text">EasyPanel\Parsers\HTMLInputs</code> namespace and start with label() method as a static method</strong></p>
75<h3 id="text"><a href="#text" aria-hidden="true"><span class="icon icon-link"></span></a>Text</h3>
76<pre class="language-php"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">inputs</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
77    <span class="token keyword">return</span> <span class="token punctuation">[</span>
78        <span class="token string single-quoted-string">'title'</span> <span class="token operator">=></span> <span class="token scope">Text<span class="token punctuation">::</span></span><span class="token function">label</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Title of Article'</span><span class="token punctuation">)</span>
79    <span class="token punctuation">]</span><span class="token punctuation">;</span>
80<span class="token punctuation">}</span> </pre>
81<h3 id="placeholder"><a href="#placeholder" aria-hidden="true"><span class="icon icon-link"></span></a>Placeholder</h3>
82<pre class="language-php"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">inputs</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
83    <span class="token keyword">return</span> <span class="token punctuation">[</span>
84        <span class="token string single-quoted-string">'title'</span> <span class="token operator">=></span> <span class="token scope">Text<span class="token punctuation">::</span></span><span class="token function">label</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Title of Article'</span><span class="token punctuation">)</span>
85            <span class="token operator">-></span><span class="token function">placeholder</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Please enter the title of article...'</span><span class="token punctuation">)</span>
86    <span class="token punctuation">]</span><span class="token punctuation">;</span>
87<span class="token punctuation">}</span></pre>
88<h3 id="input-custom-style"><a href="#input-custom-style" aria-hidden="true"><span class="icon icon-link"></span></a>Input custom style</h3>
89<pre class="language-php"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">inputs</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
90    <span class="token keyword">return</span> <span class="token punctuation">[</span>
91        <span class="token string single-quoted-string">'title'</span> <span class="token operator">=></span> <span class="token scope">Text<span class="token punctuation">::</span></span><span class="token function">label</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Title of Article'</span><span class="token punctuation">)</span>
92            <span class="token operator">-></span><span class="token function">inputStyle</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'border border-primary'</span><span class="token punctuation">)</span>
93    <span class="token punctuation">]</span><span class="token punctuation">;</span>
94<span class="token punctuation">}</span> </pre>
95<h3 id="label-styles"><a href="#label-styles" aria-hidden="true"><span class="icon icon-link"></span></a>Label styles</h3>
96<p>With <code class="language-text">labelStyle()</code> you will be able to apply some custom classes to the <code class="language-text">&lt;label&gt;</code> tag.</p>
97<pre class="language-php"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">inputs</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
98    <span class="token keyword">return</span> <span class="token punctuation">[</span>
99        <span class="token string single-quoted-string">'title'</span> <span class="token operator">=></span> <span class="token scope">Text<span class="token punctuation">::</span></span><span class="token function">label</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Title of Article'</span><span class="token punctuation">)</span>
100            <span class="token operator">-></span><span class="token function">labelStyle</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'text-warning font-20'</span><span class="token punctuation">)</span>
101    <span class="token punctuation">]</span><span class="token punctuation">;</span>
102<span class="token punctuation">}</span> </pre>
103<h3 id="autocomplete-input"><a href="#autocomplete-input" aria-hidden="true"><span class="icon icon-link"></span></a>Autocomplete input</h3>
104<p>In default, the <code class="language-text">autocomplete</code> attribute is set to <code class="language-text">on</code>, but you can turn it off.</p>
105<pre class="language-php"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">inputs</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
106    <span class="token keyword">return</span> <span class="token punctuation">[</span>
107        <span class="token string single-quoted-string">'title'</span> <span class="token operator">=></span> <span class="token scope">Text<span class="token punctuation">::</span></span><span class="token function">label</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Title of Article'</span><span class="token punctuation">)</span>
108            <span class="token operator">-></span><span class="token function">inputStyle</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'border border-primary'</span><span class="token punctuation">)</span>
109            <span class="token operator">-></span><span class="token function">withoutAutocomplete</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
110    <span class="token punctuation">]</span><span class="token punctuation">;</span>
111<span class="token punctuation">}</span> </pre>
112<p>Or, there is a replacement for <code class="language-text">withoutAutocomplete</code> called <code class="language-text">withoutAutofill</code>:</p>
113<pre class="language-php"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">inputs</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
114    <span class="token keyword">return</span> <span class="token punctuation">[</span>
115        <span class="token string single-quoted-string">'email'</span> <span class="token operator">=></span> <span class="token scope">Email<span class="token punctuation">::</span></span><span class="token function">label</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Email'</span><span class="token punctuation">)</span>
116            <span class="token operator">-></span><span class="token function">placeholder</span><span class="token punctuation">(</span><span class="token string double-quoted-string">"User's email..."</span><span class="token punctuation">)</span>
117            <span class="token operator">-></span><span class="token function">inputStyle</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'border border-primary'</span><span class="token punctuation">)</span>
118            <span class="token operator">-></span><span class="token function">withoutAutofill</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
119    <span class="token punctuation">]</span><span class="token punctuation">;</span>
120<span class="token punctuation">}</span> </pre>
121<h3 id="input-mode"><a href="#input-mode" aria-hidden="true"><span class="icon icon-link"></span></a>Input Mode</h3>
122<p>Livewire has 3 different modes for its inputs:</p>
123<ul>
124<li>wire:model</li>
125<li>wire:model.lazy</li>
126<li>wire:model.defer</li>
127</ul>
128<p>And you can create your inputs based on your needs, for example, you want to use different modes for each input you can do it easy:</p>
129<pre class="language-php"><span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function-definition function">inputs</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
130    <span class="token keyword">return</span> <span class="token punctuation">[</span>
131        <span class="token string single-quoted-string">'expired_at'</span> <span class="token operator">=></span> <span class="token scope">Datetime<span class="token punctuation">::</span></span><span class="token function">label</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Expiration time'</span><span class="token punctuation">)</span>
132                        <span class="token operator">-></span><span class="token function">lazyMode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// it will use wire:model.lazy for input</span>
133        
134        <span class="token string single-quoted-string">'name'</span> <span class="token operator">=></span> <span class="token scope">Text<span class="token punctuation">::</span></span><span class="token function">label</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'Name'</span><span class="token punctuation">)</span>
135                    <span class="token operator">-></span><span class="token function">deferMode</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// it will use wire:model.defer for input</span>
136                    
137        <span class="token string single-quoted-string">'email'</span> <span class="token operator">=></span> <span class="token scope">Email<span class="token punctuation">::</span></span><span class="token function">label</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'email'</span><span class="token punctuation">)</span>
138                    <span class="token operator">-></span><span class="token function">normalMode</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// it will use wire:model for input</span>
139    <span class="token punctuation">]</span><span class="token punctuation">;</span>
140<span class="token punctuation">}</span> </pre>
141<p><strong>If you don't pass anything, it will decide based on your config file and <code class="language-text">easy_panel.lazy_mode</code> key, if it is <code class="language-text">true</code> all of the inputs will render by <code class="language-text">wire:model.lazy</code> and if it is <code class="language-text">false</code> all of them will render by <code class="language-text">wire:model</code>.</strong></p>
142<h5 id="input-classes-list"><a href="#input-classes-list" aria-hidden="true"><span class="icon icon-link"></span></a>Input classes list:</h5>
143<ul>
144<li><code class="language-text">EasyPanel\Parsers\HTMLInputs\Text</code></li>
145<li><code class="language-text">
145EasyPanel\Parsers\HTMLInputs\Ckeditor</code></li>
146<li><code class="language-text">EasyPanel\Parsers\HTMLInputs\Checkbox</code></li>
147<li><code class="language-text">EasyPanel\Parsers\HTMLInputs\Select</code></li>
148<li><code class="language-text">EasyPanel\Parsers\HTMLInputs\File</code></li>
149<li><code class="language-text">EasyPanel\Parsers\HTMLInputs\Password</code></li>
150<li><code class="language-text">EasyPanel\Parsers\HTMLInputs\Number</code></li>
151<li><code class="language-text">EasyPanel\Parsers\HTMLInputs\Email</code></li>
152<li><code class="language-text">EasyPanel\Parsers\HTMLInputs\Date</code></li>
153<li><code class="language-text">EasyPanel\Parsers\HTMLInputs\Datetime</code></li>
154<li><code class="language-text">EasyPanel\Parsers\HTMLInputs\Time</code></li>
155<li><code class="language-text">EasyPanel\Parsers\HTMLInputs\Textarea</code></li>
156</ul>
157</div></main></div>
158    
158<script>window.__INITIAL_STATE__={"data":{"doc":{"title":"Inputs","path":"\u002Finputs\u002F","date":"18. January 2022","timeToRead":3,"content":"\u003Cul\u003E\n\u003Cli\u003E\u003Ca href=\"#provide-inputs\"\u003EProvide Inputs\u003C\u002Fa\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\n\u003Cp\u003E\u003Ca href=\"#provide-inputs\"\u003ESimple inputs\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Ca href=\"#available-types\"\u003EAvailable Types\u003C\u002Fa\u003E\u003C\u002Fli\u003E\n\u003C\u002Ful\u003E\n\u003C\u002Fli\u003E\n\u003Cli\u003E\n\u003Cp\u003E\u003Ca href=\"#inputs-but-pro\"\u003EInputs, but pro!\u003C\u002Fa\u003E\u003C\u002Fp\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Ca href=\"#text\"\u003EText\u003C\u002Fa\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Ca href=\"#placeholder\"\u003EPlaceholder\u003C\u002Fa\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Ca href=\"#input-custom-style\"\u003EInput custom style\u003C\u002Fa\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Ca href=\"#label-styles\"\u003ELabel styles\u003C\u002Fa\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Ca href=\"#autocomplete-input\"\u003EAutocomplete input\u003C\u002Fa\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Ca href=\"#input-mode\"\u003EInput Mode\u003C\u002Fa\u003E\u003C\u002Fli\u003E\n\u003C\u002Ful\u003E\n\u003C\u002Fli\u003E\n\u003C\u002Ful\u003E\n\u003Ch2 id=\"provide-inputs\"\u003E\u003Ca href=\"#provide-inputs\" aria-hidden=\"true\"\u003E\u003Cspan class=\"icon icon-link\"\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003EProvide Inputs\u003C\u002Fh2\u003E\n\u003Cp\u003ETo provide inputs, you must define them into your CRUD component which has been located in \u003Ccode class=\"language-text\"\u003Eapp\u002FCRUD\u002F\u003C\u002Fcode\u003E directory.\u003C\u002Fp\u003E\n\u003Cp\u003EThere is a method called \u003Ccode class=\"language-text\"\u003Einputs()\u003C\u002Fcode\u003E which allows you to define crud inputs for Create and Update page!\u003C\u002Fp\u003E\n\u003Ch2 id=\"simple-inputs\"\u003E\u003Ca href=\"#simple-inputs\" aria-hidden=\"true\"\u003E\u003Cspan class=\"icon icon-link\"\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003ESimple inputs\u003C\u002Fh2\u003E\n\u003Cp\u003EYou can easily pass your model property as key and input name as value to make a simple input for your CRUD.\nFor example:\u003C\u002Fp\u003E\n\u003Cpre class=\"language-php\"\u003E\u003Cspan class=\"token keyword\"\u003Epublic\u003C\u002Fspan\u003E \u003Cspan class=\"token keyword\"\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\"token function-definition function\"\u003Einputs\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E\n    \u003Cspan class=\"token keyword\"\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E[\u003C\u002Fspan\u003E\n        \u003Cspan class=\"token string single-quoted-string\"\u003E'name'\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token string single-quoted-string\"\u003E'text'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E,\u003C\u002Fspan\u003E\n        \u003Cspan class=\"token string single-quoted-string\"\u003E'image'\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token string single-quoted-string\"\u003E'file'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E,\u003C\u002Fspan\u003E\n        \u003Cspan class=\"token string single-quoted-string\"\u003E'email'\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token string single-quoted-string\"\u003E'email'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E,\u003C\u002Fspan\u003E\n        \u003Cspan class=\"token string single-quoted-string\"\u003E'active'\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token string single-quoted-string\"\u003E'checkbox'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E,\u003C\u002Fspan\u003E\n        \u003Cspan class=\"token string single-quoted-string\"\u003E'expire_time'\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token string single-quoted-string\"\u003E'datetime'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E,\u003C\u002Fspan\u003E\n        \u003Cspan class=\"token string single-quoted-string\"\u003E'birth_day'\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token string single-quoted-string\"\u003E'date'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E,\u003C\u002Fspan\u003E\n        \u003Cspan class=\"token string single-quoted-string\"\u003E'notify_time'\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token string single-quoted-string\"\u003E'time'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E,\u003C\u002Fspan\u003E\n        \u003Cspan class=\"token string single-quoted-string\"\u003E'status'\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E[\u003C\u002Fspan\u003E\u003Cspan class=\"token string single-quoted-string\"\u003E'select'\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E[\u003C\u002Fspan\u003E\n            \u003Cspan class=\"token string single-quoted-string\"\u003E'accepted'\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token string single-quoted-string\"\u003E'Accepted :)'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E,\u003C\u002Fspan\u003E\n            \u003Cspan class=\"token string single-quoted-string\"\u003E'rejected'\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token string single-quoted-string\"\u003E'Rejected :('\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E,\u003C\u002Fspan\u003E\n            \u003Cspan class=\"token string single-quoted-string\"\u003E'pending'\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token string single-quoted-string\"\u003E'Pending!'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E,\u003C\u002Fspan\u003E\n        \u003Cspan class=\"token punctuation\"\u003E]\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E]\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E,\u003C\u002Fspan\u003E\n    \u003Cspan class=\"token punctuation\"\u003E]\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E\u003C\u002Fpre\u003E\n\u003Cp\u003EAnd that's it! This code will generate a simple form that includes 4 inputs.\u003C\u002Fp\u003E\n\u003Ch4 id=\"available-types\"\u003E\u003Ca href=\"#available-types\" aria-hidden=\"true\"\u003E\u003Cspan class=\"icon icon-link\"\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003EAvailable types\u003C\u002Fh4\u003E\n\u003Cul\u003E\n\u003Cli\u003ECkeditor\u003C\u002Fli\u003E\n\u003Cli\u003ECheckbox\u003C\u002Fli\u003E\n\u003Cli\u003EText\u003C\u002Fli\u003E\n\u003Cli\u003ESelect\u003C\u002Fli\u003E\n\u003Cli\u003EFile\u003C\u002Fli\u003E\n\u003Cli\u003EPassword\u003C\u002Fli\u003E\n\u003Cli\u003ENumber\u003C\u002Fli\u003E\n\u003Cli\u003EEmail\u003C\u002Fli\u003E\n\u003Cli\u003EDate\u003C\u002Fli\u003E\n\u003Cli\u003EDatetime\u003C\u002Fli\u003E\n\u003Cli\u003ETime\u003C\u002Fli\u003E\n\u003Cli\u003ETextarea\u003C\u002Fli\u003E\n\u003C\u002Ful\u003E\n\u003Ch2 id=\"input
158s-but-pro\"\u003E\u003Ca href=\"#inputs-but-pro\" aria-hidden=\"true\"\u003E\u003Cspan class=\"icon icon-link\"\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003EInputs, but pro!\u003C\u002Fh2\u003E\n\u003Cp\u003EYou can create inputs as simple as possible as you want, but there is more customizability to make better inputs!\u003C\u002Fp\u003E\n\u003Cp\u003E\u003Cstrong\u003EAll of these inputs have \u003Ccode class=\"language-text\"\u003EEasyPanel\\Parsers\\HTMLInputs\u003C\u002Fcode\u003E namespace and start with label() method as a static method\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\n\u003Ch3 id=\"text\"\u003E\u003Ca href=\"#text\" aria-hidden=\"true\"\u003E\u003Cspan class=\"icon icon-link\"\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003EText\u003C\u002Fh3\u003E\n\u003Cpre class=\"language-php\"\u003E\u003Cspan class=\"token keyword\"\u003Epublic\u003C\u002Fspan\u003E \u003Cspan class=\"token keyword\"\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\"token function-definition function\"\u003Einputs\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E\n    \u003Cspan class=\"token keyword\"\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E[\u003C\u002Fspan\u003E\n        \u003Cspan class=\"token string single-quoted-string\"\u003E'title'\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token scope\"\u003EText\u003Cspan class=\"token punctuation\"\u003E::\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token function\"\u003Elabel\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token string single-quoted-string\"\u003E'Title of Article'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\n    \u003Cspan class=\"token punctuation\"\u003E]\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E \u003C\u002Fpre\u003E\n\u003Ch3 id=\"placeholder\"\u003E\u003Ca href=\"#placeholder\" aria-hidden=\"true\"\u003E\u003Cspan class=\"icon icon-link\"\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003EPlaceholder\u003C\u002Fh3\u003E\n\u003Cpre class=\"language-php\"\u003E\u003Cspan class=\"token keyword\"\u003Epublic\u003C\u002Fspan\u003E \u003Cspan class=\"token keyword\"\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\"token function-definition function\"\u003Einputs\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E\n    \u003Cspan class=\"token keyword\"\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E[\u003C\u002Fspan\u003E\n        \u003Cspan class=\"token string single-quoted-string\"\u003E'title'\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token scope\"\u003EText\u003Cspan class=\"token punctuation\"\u003E::\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token function\"\u003Elabel\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token string single-quoted-string\"\u003E'Title of Article'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\n            \u003Cspan class=\"token operator\"\u003E-\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token function\"\u003Eplaceholder\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token string single-quoted-string\"\u003E'Please enter the title of article...'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\n    \u003Cspan class=\"token punctuation\"\u003E]\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E\u003C\u002Fpre\u003E\n\u003Ch3 id=\"input-custom-style\"\u003E\u003Ca href=\"#input-custom-style\" aria-hidden=\"true\"\u003E\u003Cspan class=\"icon icon-link\"\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003EInput custom style\u003C\u002Fh3\u003E\n\u003Cpre class=\"language-php\"\u003E\u003Cspan class=\"token keyword\"\u003Epublic\u003C\u002Fspan\u003E \u003Cspan class=\"token keyword\"\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\"token function-definition function\"\u003Einputs\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E\n    \u003Cspan class=\"token keyword\"\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E[\u003C\u002Fspan\u003E\n        \u003Cspan class=\"token string single-quoted-string\"\u003E'title'\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token scope\"\u003EText\u003Cspan class=\"token punctuation\"\u003E::\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token function\"\u003Elabel\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token string single-quoted-string\"\u003E'Title of Article'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\n            \u003Cspan class=\"token operator\"\u003E-\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token function\"\u003EinputStyle\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token string single-quoted-string\"\u003E'border border-primary'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\n    \u003Cspan class=\"token punctuation\"\u003E]\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E \u003C\u002Fpre\u003E\n\u003Ch3 id=\"label-styles\"\u003E\u003Ca href=\"#label-styles\" aria-hidden=\"true\"\u003E\u003Cspan class=\"icon icon-link\"\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003ELabel styles\u003C\u002Fh3\u003E\n\u003Cp\u003EWith \u003Ccode class=\"language-text\"\u003ElabelStyle()\u003C\u002Fcode\u003E you will be able to apply some custom classes to the \u003Ccode class=\"language-text\"\u003E&lt;label&gt;\u003C\u002Fcode\u003E tag.\u003C\u002Fp\u003E\n\u003Cpre class=\"language-php\"\u003E\u003Cspan class=\"token keyword\"\u003Epublic\u003C\u002Fspan\u003E \u003Cspan class=\"token keyword\"\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\"token function-definition function\"\u003Einputs\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E\n    \u003Cspan class=\"token keyword\"\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E[\u003C\u002Fspan\u003E\n        \u003Cspan class=\"token string single-quoted-string\"\u003E'title'\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token scope\"\u003EText\u003Cspan class=\"token punctuation\"\u003E::\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token function\"\u003Elabel\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token string single-quoted-string\"\u003E'Title of Article'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\n            \u003Cspan class=\"token operator\"\u003E-\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token function\"\u003ElabelStyle\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token string single-quoted-string\"\u003E'text-warning font-20'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\n    \u003Cspan class=\"token punctuation\"\u003E]\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E \u003C\u002Fpre\u003E\n\u003Ch3 id=\"autocomplete-input\"\u003E\u003Ca href=\"#autocomplete-input\" aria-hidden=\"true\"\u003E\u003Cspan class=\"icon icon-link\"\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003EAutocomplete input\u003C\u002Fh3\u003E\n\u003Cp\u003EIn default, the \u003Ccode class=\"language-text\"\u003Eautocomplete\u003C\u002Fcode\u003E attribute is set to \u003Ccode class=\"language-text\"\u003Eon\u003C\u002Fcode\u003E, but you can turn it off.\u003C\u002Fp\u003E\n\u003Cpre class=\"language-php\"\u003E\u003Cspan class=\"token keyword\"\u003Epublic\u003C\u002Fspan\u003E \u003Cspan class=\"token keyword\"\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\"token function-definition function\"\u003Einputs\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E\n    \u003Cspan class=\"token keyword\"\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E[\u003C\u002Fspan\u003E\n        \u003Cspan class=\"token string single-quoted-string\"\u003E'title'\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token scope\"\u003EText\u003Cspan class=\"token punctuation\"\u003E::\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token function\"\u003Elabel\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token string single-quoted-string\"\u003E'Title of Article'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\n            \u003Cspan class=\"token operator\"\u003E-\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token function\"\u003EinputStyle\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token string single-quoted-string\"\u003E'border border-primary'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\n            \u003Cspan class=\"token operator\"\u003E-\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token function\"\u003EwithoutAutocomplete\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\n    \u003Cspan class=\"token punctuation\"\u003E]\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E \u003C\u002Fpre\u003E\n\u003Cp\u003EOr, there is a replacement for \u003Ccode class=\"language-text\"\u003EwithoutAutocomplete\u003C\u002Fcode\u003E called \u003Ccode class=\"language-text\"\u003EwithoutAutofill\u003C\u002Fcode\u003E:\u003C\u002Fp\u003E\n\u003Cpre class=\"language-php\"\u003E\u003Cspan class=\"token keyword\"\u003Epublic\u003C\u002Fspan\u003E \u003Cspan class=\"token keyword\"\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\"token function-definition function\"\u003Einputs\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E\n    \u003Cspan class=\"token keyword\"\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E[\u003C\u002Fspan\u003E\n        \u003Cspan class=\"token string single-quoted-string\"\u003E'email'\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token scope\"\u003EEmail\u003Cspan class=\"token punctuation\"\u003E::\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token function\"\u003Elabel\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token string single-quoted-string\"\u003E'Email'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\n            \u003Cspan class=\"token operator\"\u003E-\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token function\"\u003Eplaceholder\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token string double-quoted-string\"\u003E\"User's email...\"\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\n            \u003Cspan class=\"token operator\"\u003E-\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token function\"\u003EinputStyle\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token string single-quoted-string\"\u003E'border border-primary'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\n            \u003Cspan class=\"token operator\"\u003E-\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token function\"\u003EwithoutAutofill\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\n    \u003Cspan class=\"token punctuation\"\u003E]\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E \u003C\u002Fpre\u003E\n\u003Ch3 id=\"input-mode\"\u003E\u003Ca href=\"#input-mode\" aria-hidden=\"true\"\u003E\u003Cspan class=\"icon icon-link\"\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003EInput Mode\u003C\u002Fh3\u003E\n\u003Cp\u003ELivewire has 3 different modes for its inputs:\u003C\u002Fp\u003E\n\u003Cul\u003E\n\u003Cli\u003Ewire:model\u003C\u002Fli\u003E\n\u003Cli\u003Ewire:model.lazy\u003C\u002Fli\u003E\n\u003Cli\u003Ewire:model.defer\u003C\u002Fli\u003E\n\u003C\u002Ful\u003E\n\u003Cp\u003EAnd you can create your inputs based on your needs, for example, you want to use different modes for each input you can do it easy:\u003C\u002Fp\u003E\n\u003Cpre class=\"language-php\"\u003E\u003Cspan class=\"token keyword\"\u003Epublic\u003C\u002Fspan\u003E \u003Cspan class=\"token keyword\"\u003Efunction\u003C\u002Fspan\u003E \u003Cspan class=\"token function-definition function\"\u003Einputs\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E{\u003C\u002Fspan\u003E\n    \u003Cspan class=\"token keyword\"\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\"token punctuation\"\u003E[\u003C\u002Fspan\u003E\n        \u003Cspan class=\"token string single-quoted-string\"\u003E'expired_at'\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token scope\"\u003EDatetime\u003Cspan class=\"token punctuation\"\u003E::\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token function\"\u003Elabel\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token string single-quoted-string\"\u003E'Expiration time'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\n                        \u003Cspan class=\"token operator\"\u003E-\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token function\"\u003ElazyMode\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\"token comment\"\u003E\u002F\u002F it will use wire:model.lazy for input\u003C\u002Fspan\u003E\n        \n        \u003Cspan cl
158ass=\"token string single-quoted-string\"\u003E'name'\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token scope\"\u003EText\u003Cspan class=\"token punctuation\"\u003E::\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token function\"\u003Elabel\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token string single-quoted-string\"\u003E'Name'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\n                    \u003Cspan class=\"token operator\"\u003E-\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token function\"\u003EdeferMode\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\"token comment\"\u003E\u002F\u002F it will use wire:model.defer for input\u003C\u002Fspan\u003E\n                    \n        \u003Cspan class=\"token string single-quoted-string\"\u003E'email'\u003C\u002Fspan\u003E \u003Cspan class=\"token operator\"\u003E=\u003E\u003C\u002Fspan\u003E \u003Cspan class=\"token scope\"\u003EEmail\u003Cspan class=\"token punctuation\"\u003E::\u003C\u002Fspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token function\"\u003Elabel\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token string single-quoted-string\"\u003E'email'\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E\n                    \u003Cspan class=\"token operator\"\u003E-\u003E\u003C\u002Fspan\u003E\u003Cspan class=\"token function\"\u003EnormalMode\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\"token comment\"\u003E\u002F\u002F it will use wire:model for input\u003C\u002Fspan\u003E\n    \u003Cspan class=\"token punctuation\"\u003E]\u003C\u002Fspan\u003E\u003Cspan class=\"token punctuation\"\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\"token punctuation\"\u003E}\u003C\u002Fspan\u003E \u003C\u002Fpre\u003E\n\u003Cp\u003E\u003Cstrong\u003EIf you don't pass anything, it will decide based on your config file and \u003Ccode class=\"language-text\"\u003Eeasy_panel.lazy_mode\u003C\u002Fcode\u003E key, if it is \u003Ccode class=\"language-text\"\u003Etrue\u003C\u002Fcode\u003E all of the inputs will render by \u003Ccode class=\"language-text\"\u003Ewire:model.lazy\u003C\u002Fcode\u003E and if it is \u003Ccode class=\"language-text\"\u003Efalse\u003C\u002Fcode\u003E all of them will render by \u003Ccode class=\"language-text\"\u003Ewire:model\u003C\u002Fcode\u003E.\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\n\u003Ch5 id=\"input-classes-list\"\u003E\u003Ca href=\"#input-classes-list\" aria-hidden=\"true\"\u003E\u003Cspan class=\"icon icon-link\"\u003E\u003C\u002Fspan\u003E\u003C\u002Fa\u003EInput classes list:\u003C\u002Fh5\u003E\n\u003Cul\u003E\n\u003Cli\u003E\u003Ccode class=\"language-text\"\u003EEasyPanel\\Parsers\\HTMLInputs\\Text\u003C\u002Fcode\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Ccode class=\"language-text\"\u003EEasyPanel\\Parsers\\HTMLInputs\\Ckeditor\u003C\u002Fcode\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Ccode class=\"language-text\"\u003EEasyPanel\\Parsers\\HTMLInputs\\Checkbox\u003C\u002Fcode\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Ccode class=\"language-text\"\u003EEasyPanel\\Parsers\\HTMLInputs\\Select\u003C\u002Fcode\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Ccode class=\"language-text\"\u003EEasyPanel\\Parsers\\HTMLInputs\\File\u003C\u002Fcode\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Ccode class=\"language-text\"\u003EEasyPanel\\Parsers\\HTMLInputs\\Password\u003C\u002Fcode\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Ccode class=\"language-text\"\u003EEasyPanel\\Parsers\\HTMLInputs\\Number\u003C\u002Fcode\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Ccode class=\"language-text\"\u003EEasyPanel\\Parsers\\HTMLInputs\\Email\u003C\u002Fcode\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Ccode class=\"language-text\"\u003EEasyPanel\\Parsers\\HTMLInputs\\Date\u003C\u002Fcode\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Ccode class=\"language-text\"\u003EEasyPanel\\Parsers\\HTMLInputs\\Datetime\u003C\u002Fcode\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Ccode class=\"language-text\"\u003EEasyPanel\\Parsers\\HTMLInputs\\Time\u003C\u002Fcode\u003E\u003C\u002Fli\u003E\n\u003Cli\u003E\u003Ccode class=\"language-text\"\u003EEasyPanel\\Parsers\\HTMLInputs\\Textarea\u003C\u002Fcode\u003E\u003C\u002Fli\u003E\n\u003C\u002Ful\u003E\n"}},"context":{}};(function(){var s;(s=document.currentScript||document.scripts[document.scripts.length-1]).parentNode.removeChild(s);}());</script>
158<script src="/assets/js/app.5f2318c4.js" defer></script>
158<script src="/assets/js/page--src--templates--doc-vue.c9b7ae84.js" defer></script>
158
159  </body>
160</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.