Form components are wrappers of similar HTML elements; they can be passed all the necessary attributes.
Basics
The Form component is designed to create forms.
<x-moonshine::form raw>// form elements</x-moonshine::form>
<x-moonshine::form raw>// form elements</x-moonshine::form>
The component creates html
markup for the future form.
<formclass="form" method="POST"x-id="['form']":id="$id('form')"><input type="hidden" name="_token" value="huwre3xs9N9k82ThhkGVVfzWuf0L6heHRnEAogHD" autocomplete="off">// form elements</form>
<formclass="form" method="POST"x-id="['form']":id="$id('form')"><input type="hidden" name="_token" value="huwre3xs9N9k82ThhkGVVfzWuf0L6heHRnEAogHD" autocomplete="off">// form elements</form>
Buttons
The Form component allows you to place buttons in a separate block, To do this, you need to pass them in the buttons
slot.
<x-moonshine::form><x-moonshine::form.inputname="title"placeholder="Title"value=""/><x-slot:buttons><x-moonshine::form.button type="reset">Cancel</x-moonshine::form.button><x-moonshine::form.button class="btn-primary">Submit</x-moonshine::form.button></x-slot:buttons></x-moonshine::form>
<x-moonshine::form><x-moonshine::form.inputname="title"placeholder="Title"value=""/><x-slot:buttons><x-moonshine::form.button type="reset">Cancel</x-moonshine::form.button><x-moonshine::form.button class="btn-primary">Submit</x-moonshine::form.button></x-slot:buttons></x-moonshine::form>
Errors
The errors
parameter allows you to display a list of errors.
<x-moonshine::form raw error>// form elements</x-moonshine::form>
<x-moonshine::form raw error>// form elements</x-moonshine::form>
If there are several forms on the page, it is recommended to set name
to the form, to display errors only for a specific form.
<x-moonshine::form raw error name="my-form">// form elements</x-moonshine::form>
<x-moonshine::form raw error name="my-form">// form elements</x-moonshine::form>
Precognition
The precognitive
parameter allows you to enable the Precognition mode for the form.
<x-moonshine::form precognitive>// form elements</x-moonshine::form>
<x-moonshine::form precognitive>// form elements</x-moonshine::form>
Label
<x-moonshine::form.label name="slug">Slug</x-moonshine::form.label>
<x-moonshine::form.label name="slug">Slug</x-moonshine::form.label>
If a field is required, you can pass the required
attribute to style the element.
<x-moonshine::form.label name="title" required>Title</x-moonshine::form.label>
<x-moonshine::form.label name="title" required>Title</x-moonshine::form.label>
Input
<x-moonshine::form.inputname="title"placeholder="Title"value=""/>
<x-moonshine::form.inputname="title"placeholder="Title"value=""/>
Checkbox
<x-moonshine::form.label><x-moonshine::form.inputname="property[]"type="checkbox"value="1"/>Property 1</x-moonshine::form.label>
<x-moonshine::form.label><x-moonshine::form.inputname="property[]"type="checkbox"value="1"/>Property 1</x-moonshine::form.label>
Radio
<x-moonshine::form.label><x-moonshine::form.inputname="variant"type="radio"value="1"/>Variant 1</x-moonshine::form.label>
<x-moonshine::form.label><x-moonshine::form.inputname="variant"type="radio"value="1"/>Variant 1</x-moonshine::form.label>
Color
<x-moonshine::form.inputname="color"type="color"value="#ec4176"/>
<x-moonshine::form.inputname="color"type="color"value="#ec4176"/>
Button
<x-moonshine::form.button>Click me</x-moonshine::form.button>
<x-moonshine::form.button>Click me</x-moonshine::form.button>
Hint
<x-moonshine::form.hint>{{ fake()->sentence() }}</x-moonshine::form.hint>
<x-moonshine::form.hint>{{ fake()->sentence() }}</x-moonshine::form.hint>
File
<x-moonshine::form.file name="file" />
<x-moonshine::form.file name="file" />
Using the component, you can display previously downloaded files.
<x-moonshine::form.file:files="['/images/thumb_1.jpg','/images/thumb_2.jpg','/images/thumb_3.jpg']":raw="['thumb_1.jpg','thumb_2.jpg','thumb_3.jpg']"name="images[]"multiple="multiple"/>
<x-moonshine::form.file:files="['/images/thumb_1.jpg','/images/thumb_2.jpg','/images/thumb_3.jpg']":raw="['thumb_1.jpg','thumb_2.jpg','thumb_3.jpg']"name="images[]"multiple="multiple"/>
files
- array of url files for output
raw
- array of source data (value stored in the database).
You can pass additional parameters to the component:
download
- downloading the uploaded file
removable
- removal from the list of downloaded files
imageable
- displaying preview image
<x-moonshine::form.file:files="['/images/thumb_1.jpg','/images/thumb_2.jpg','/images/thumb_3.jpg']":raw="['thumb_1.jpg','thumb_2.jpg','thumb_3.jpg']"name="images[]"multiple="multiple":download="true":removable="false":imageable="false"/>
<x-moonshine::form.file:files="['/images/thumb_1.jpg','/images/thumb_2.jpg','/images/thumb_3.jpg']":raw="['thumb_1.jpg','thumb_2.jpg','thumb_3.jpg']"name="images[]"multiple="multiple":download="true":removable="false":imageable="false"/>
Slide range
<x-moonshine::form.slide-rangefromName="from"toName="to"fromValue="1000"toValue="9000"min="0"max="10000"/>
<x-moonshine::form.slide-rangefromName="from"toName="to"fromValue="1000"toValue="9000"min="0"max="10000"/>
Select
<x-moonshine::form.select:values="[1 => 'Option 1',2 => 'Option 2']"value="2"/>
<x-moonshine::form.select:values="[1 => 'Option 1',2 => 'Option 2']"value="2"/>
or through slot:options
<x-moonshine::form.select><x-slot:options><option value="1">Option 1</option><option selected value="2">Option 2</option></x-slot:options></x-moonshine::form.select>
<x-moonshine::form.select><x-slot:options><option value="1">Option 1</option><option selected value="2">Option 2</option></x-slot:options></x-moonshine::form.select>
You can combine values into groups.
<x-moonshine::form.select:values="['Italy' => [1 => 'Rome',2 => 'Milan'],'France' => [3 => 'Paris',4 => 'Marseille'],]":searchable="true"/>
<x-moonshine::form.select:values="['Italy' => [1 => 'Rome',2 => 'Milan'],'France' => [3 => 'Paris',4 => 'Marseille'],]":searchable="true"/>
You can pass additional parameters to the component:
searchable
- search by values
nullable
- may matter NULL
<x-moonshine::form.select:values="[1 => 'Option 1',2 => 'Option 2']":nullable="true":searchable="true"/>
<x-moonshine::form.select:values="[1 => 'Option 1',2 => 'Option 2']":nullable="true":searchable="true"/>
To load values asynchronously, you need to specify the url for the asyncRoute
attribute, which will return data in json format.
<x-moonshine::form.select asyncRoute='url' />
<x-moonshine::form.select asyncRoute='url' />
Switcher
<x-moonshine::form.switcher:onValue="true":offValue="false"checked="checked"/>
<x-moonshine::form.switcher:onValue="true":offValue="false"checked="checked"/>
onValue
- active value
offValue
- inactive value
Textarea
<x-moonshine::form.textarea>{{ fake()->text() }}</x-moonshine::form.textarea>
<x-moonshine::form.textarea>{{ fake()->text() }}</x-moonshine::form.textarea>