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="UBSpNvjwB1kgQjtXtIvZ49RthoMF2mtQ3Vefxumf" 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>
Illo quas reprehenderit maxime suscipit blanditiis.

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

# 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>
UI components
Files
UI components
Grid/Column