Form elements

Компоненты форм являются оберткой аналогичных html-элементов, им можно передавать все необходимые атрибуты.

# Основы

Компонент Form является основой для построения форм.

<x-moonshine::form raw>
// form elements
</x-moonshine::form>

Компонент создает html разметку для будущей формы.

<form
class="form" method="POST"
x-id="['form']"
:id="$id('form')"
>
<input type="hidden" name="_token" value="zWnMuI5hJSeJibtXfhoWkOxsKr7aUNRXuAfwGLPh" autocomplete="off">
 
// form elements
 
</form>
Buttons

Компонент Form позволяет вынести кнопки в отдельный блок, для этого необходимо передать их в слоте buttons.

<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 позволяет выводить список ошибок.

<x-moonshine::form raw error>
// form elements
</x-moonshine::form>

Если на странице несколько форм, рекомендуется задать name у формы, для вывода ошибок только для конкретной формы.

<x-moonshine::form raw error name="my-form">
// form elements
</x-moonshine::form>
Precognition

Параметр precognitive позволяет включить у формы режим Precognition.

<x-moonshine::form precognitive>
// form elements
</x-moonshine::form>

# Label

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

Если поле обязательно для заполнения, то можно передать атрибут required для стилизации элемента.

<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>
Recusandae consequatur iure dicta dolores molestias.

# File

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

С помощью компонента можно отобразить ранее загруженные файлы.

<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 - массив url файлов для вывода
raw - массив исходных данных (значение сохраненное в базе данных).

Компоненту можно передать дополнительные параметры:

download - скачивание загруженного файла
removable - удаление из списка загруженных файлов
imageable - отображение превью изображений

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

или через 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
:values="[
'Italy' => [
1 => 'Rome',
2 => 'Milan'
],
'France' => [
3 => 'Paris',
4 => 'Marseille'
],
]"
:searchable="true"
/>

Компоненту можно передать дополнительные параметры:

searchable - поиск по значениям
nullable - может иметь значение NULL

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

Для асинхронной загрузки значений необходимо атрибуту asyncRoute указать url, который вернет данные в формате json.

<x-moonshine::form.select asyncRoute='url' />

# Switcher

<x-moonshine::form.switcher
:onValue="true"
:offValue="false"
checked="checked"
/>

onValue - значение при активном состоянии
offValue - значение при неактивном состоянии

# Textarea

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