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>
Vel delectus et expedita voluptatem voluptatem.

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

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