UI components

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="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.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>

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

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

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>