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