Portal UI

Form

Building forms. 

<x-portal::form action="{{ route('form.action') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <x-portal::form.input name="username" label="Username" placeholder="shadcn" type="text" />
    <x-portal::button x-bind:loading="submited" type="submit">Submit</x-portal::button>
</x-portal::form>

Publishing Component

If you want to customize the components, you can publish them by running the following command : 

php artisan vendor:publish --tag=portal-ui:form --force


With Description

Your active company email address

This email must be a valid email address 

<x-portal::form.input 
    name="email" 
    type="email"
    label="Email" 
    placeholder="Input your email address"
    description="Your active company email address"
    description-trailing="This email must be a valid email address" 
/>


Select 

<x-portal::form.select 
    name="city" 
    label="City" 
    placeholder="shadcn" 
    description=""  
    description-trailing=""    
>
    <option value="Select a fruit" selected disabled>
        Select a fruit
    </option>
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="blueberry">Blueberry</option>
    <option value="grapes">Grapes</option>
    <option value="pineapple">Pineapple</option>
</x-portal::form.select>


Combobox 

<x-portal::form.combobox 
    name="user" 
    label="User"
    placeholder="Select User" 
    description=""  
    description-trailing="" 
    :search="false"
>
    @for($i = 0; $i < 60; $i++)
        @php
            @$name = fake()->name;
        @endphp
        <x-portal::combobox.option value="{{ $name }}">
            {{ $name }}
        </x-portal::combobox.option>
    @endfor
</x-portal::form.combobox>


Textarea 

<x-portal::form.textarea 
    name="address" 
    label="Address" 
    placeholder="Enter your location address" 
    description=""  
    description-trailing=""
/>


Date Picker 

<x-portal::form.group 
    label="Published Date" 
    name="published_date" 
    description=""
    description-trailing=""
>
    <x-portal::datepicker placeholder="yyyy-mm-dd" type="date" name="published_date"/>
</x-portal::form.group>


Checkbox 

<x-portal::form.group 
    label="Notification" 
    name="notification" 
    description=""
    description-trailing=""
>
    <div class="flex gap-3 flex-col">
        <x-portal::checkbox 
            id="newsletter" 
            value="newsletter" 
            name="checkbox[]" 
            label="Newsletter" 
        />
        <x-portal::checkbox 
            id="updates"
            value="updates" 
            name="checkbox[]" 
            label="Product updates"
        />
        <x-portal::checkbox 
            id="invitations" 
            value="invitations" 
            name="checkbox[]"
            label="Event invitations" 
        />
    </div>
</x-portal::form.group>


Radio 

<x-portal::form.group 
    label="Radio" 
    name="radio" 
    description=""
    description-trailing=""
>
    <div class="flex gap-3 flex-col">
        <x-portal::radio 
            id="newsletter_radio" 
            value="newsletter" 
            name="radio" 
            label="Newsletter" 
        />
        <x-portal::radio 
            id="updates_radio" 
            value="updates" 
            name="radio" 
            label="Product updates" 
        />
        <x-portal::radio 
            id="invitations_radio" 
            value="invitations"
            name="radio"
            label="Event invitations" 
        />
    </div>
</x-portal::form.group>


Quill Editor 

<x-portal::form.group 
    label="Quill Editor" 
    name="quill_editor" 
    description=""
    description-trailing=""
>
    <x-portal::editor name="quill_editor" height="150">Default Value</x-portal::editor>
</x-portal::form.group>


CKEditor 

<x-portal::form.group 
    label="CKEditor" 
    name="ck_editor" 
    description=""
    description-trailing=""
>
    <x-portal::editor.ckeditor name="ck_editor" height="150">Default Value</x-portal::editor.ckeditor>
</x-portal::form.group>


File Upload 

<x-portal::form.group 
    label="File upload in form" 
    name="file_upload" 
    description=""
    description-trailing=""
>
    <x-portal::file-upload 
        icon="file-type-pdf" 
        required 
        maxsize="2" 
        name="file_upload" 
        accept="application/pdf" 
        description="Only PDF file are accepted"
    />
</x-portal::form.group>


Image Upload 

<x-portal::form.group 
    label="Image upload in form" 
    name="image_upload" 
    description=""
    description-trailing=""
>
    <x-portal::file-upload.image
        required 
        maxsize="2" 
        name="image_upload"
    />
</x-portal::form.group>