← BackAll TalksAbout
6 / 14

Slots in Practice

  • The profile update form demonstrates how slots compose together
  • A title slot, a description slot, a form slot, and an action slot
  • Inside the form slot, more Blade components handle inputs, labels, and errors
<x-jet-form-section submit="updateProfileInformation">
    <x-slot name="title">
        {{ __('Profile Information') }}
    </x-slot>

    <x-slot name="description">
        {{ __('Update your profile information and email address.') }}
    </x-slot>

    <x-slot name="form">
        <div class="col-span-6 sm:col-span-4">
            <x-jet-label for="name" value="{{ __('Name') }}" />
            <x-jet-input id="name" type="text" class="mt-1 block w-full"
                wire:model.defer="state.name" />
            <x-jet-input-error for="name" class="mt-2" />
        </div>
    </x-slot>

    <x-slot name="actions">
        <x-jet-action-message class="mr-3" on="saved">
            {{ __('Saved.') }}
        </x-jet-action-message>
        <x-jet-button>{{ __('Save') }}</x-jet-button>
    </x-slot>
</x-jet-form-section>

← / → navigate · N notes · Esc exit