Form elements

You're browsing the documentation for an old version of MoonShine. Consider upgrading your project to MoonShine 2.x.

Form components are a wrapper for similar html elements, they can be passed all the necessary attributes.

# Label

<x-moonshine::form.label name="slug">
Slug
</x-moonshine::form.label>

If the field is required, then 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 select

<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>
Ut ut architecto eos nihil sed.

# File

<x-moonshine::form.file name="file" />

Using the component, you can display previously uploaded files.

<x-moonshine::form.file :files="[
'/images/thumb_1.jpg',
'/images/thumb_2.jpg',
'/images/thumb_3.jpg'
]" name="images[]" multiple="multiple"/>

Additionally, hidden fields will be created with the values passed in the files[] array.

You can pass additional parameters to the component:

download - download downloaded file
removable - removal from the list of downloaded files
imageable - display image previews

<x-moonshine::form.file
:files="[
'/images/thumb_1.jpg',
'/images/thumb_2.jpg',
'/images/thumb_3.jpg'
]"
name="images[]"
multiple="multiple"
:download="true"
:removable="false"
:imageable="false"
/>

# Range

<x-moonshine::form.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 via 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 - can be NULL

<x-moonshine::form.select
:values="[
1 => 'Option 1',
2 => 'Option 2'
]"
:nullable="true"
:searchable="true"
/>

For asynchronous loading of values, you need to specify the url in 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 - value when active
offValue - value when inactive

# Textarea

<x-moonshine::form.textarea>
{{ fake()->text() }}
</x-moonshine::form.textarea>