Form elements

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>

The component creates html markup for the future form.

<form
class="form" method="POST"
x-id="['form']"
:id="$id('form')"
>
<input type="hidden" name="_token" value="f5XAXUqZIlZXlgiElNBulfBNKIhXMgWEruWLWpGK" 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.input
name="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>

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>
Precognition

The precognitive parameter allows you to enable the Precognition mode for the form.

<x-moonshine::form precognitive>
// form elements
</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>

# Input

<x-moonshine::form.input
name="title"
placeholder="Title"
value=""
/>

# Checkbox

<x-moonshine::form.label>
<x-moonshine::form.input
name="property[]"
type="checkbox"
value="1"
/>
Property 1
</x-moonshine::form.label>

# Radio

<x-moonshine::form.label>
<x-moonshine::form.input
name="variant"
type="radio"
value="1"
/>
Variant 1
</x-moonshine::form.label>

# Color

<x-moonshine::form.input
name="color"
type="color"
value="#ec4176"
/>

# Button

<x-moonshine::form.button>Click me</x-moonshine::form.button>

# Hint

<x-moonshine::form.hint>
{{ fake()->sentence() }}
</x-moonshine::form.hint>
Incidunt inventore suscipit et reiciendis similique amet voluptatem.

# 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"
/>
/images/thumb_1.jpg
/images/thumb_2.jpg
/images/thumb_3.jpg

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 images

<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-range
fromName="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"
/>

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>

You can combine values into groups.

<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"
/>

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' />

# Switcher

<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>