Modal

The modal component show a dialog in the middle of the screen, usually upon clicking a trigger button.
<x-modal> is a rather bare component; it needs to be passed other components, such as a card to even have a basic background.

<x-button label="Open modal" onClick="myModal1.showModal()"/>
<x-modal id="myModal1">
  <x-card class="bg-base-100 w-100" title="Hello" description="You have just opened a modal dialog!">
	Press <kbd>Esc</kbd> or press the button to close the modal.
	<x-slot:actions>
	  <form method="dialog">
	  <!-- if there is a button in form, it will close the modal -->
	    <x-button label="Close"/>
	  </form>
	</x-slot:actions>
  </x-card>
</x-modal>

#Modals with a ✕ close button

You can add a close button in the corner of a modal, which you can do using absolute positioning or by highjacking an indicator to show a button sightly outside the modal.

<x-button label="Inside close button" onclick="closeModal1.showModal()"/>
<x-button label="Hijacker" onclick="closeModal2.showModal()"/>

<x-modal id="closeModal1">
  <x-card class="bg-base-100 w-120">
	<x-slot:title class="text-left">
	  Modal with a ✕ corner button
  	  <x-button label="✕" size="sm" variant="ghost" class="hover:btn-error btn-circle absolute right-2 top-2" onclick="closeModal1.close()"/>
	</x-slot:title>
	Press <kbd>ESC</kbd> or click on <code>✕</code> button to close
  </x-card>
</x-modal>

<x-modal id="closeModal2">
  <x-indicator>
	<x-slot:indicator>
	  <x-button label="✕" size="sm" color="error" class="btn-circle shadow-none" onclick="closeModal2.close()"/>
	</x-slot:indicator>
	  <x-card class="bg-base-100 w-120">
		<x-slot:title class="text-left">
		  Modal with a ✕ indicator button
		</x-slot:title>
	Press <kbd>ESC</kbd> or click on <code>✕</code> button to close
	</x-card>
  </x-indicator>
</x-modal>

#Examples

#Minimal Register/Login form in a modal

As an alternative to redirecting users to a login page, you can allow your users to login or register anywhere, with a modal.

<x-button label="Login / Register" onClick="loginModal.showModal()"/>
<x-modal id="loginModal">
  <x-card class="bg-base-100 w-120">
	<x-slot:title class="text-left">
	  Login/Register 
	  <x-button label="✕" size="sm" variant="ghost" class="hover:btn-error btn-circle absolute right-2 top-2" onclick="loginModal.close()"/>
	</x-slot:title>
	<x-tabs variant="border">
	  <x-tab label="Login">
		<form class="flex flex-col gap-4">
		  <x-input
			id="login-email"
			class="w-full invalid:border-error"
			title="Login"
			type="email"
			name="email"
			placeholder="[email protected]"
			icon="heroicon-s-user"
			required
			wire:model="email"
		  />
		  <x-password
			id="login-password"
			class="w-full invalid:border-error"
			title="Password"
			name="password"
			placeholder="●●●●●●●●"
			icon="heroicon-s-lock-closed"
			required
			eye
			wire:model="password"
		  />
		  <x-checkbox name="remember" label="Remember me"/>
		  <x-button class="self-end" type="submit" label="Login"/>
		</form>
      </x-tab>
	  <x-tab label="Register">
		<form class="grid grid-cols-2 gap-x-2 gap-y-4">
		  <x-input
			id="register-email"
		    title="Login"
			type="email"
			name="email"
			class="col-span-full"
			placeholder="[email protected]"
			icon="heroicon-s-user"
			required
		  />
          <x-password
            id="register-password"
            type="password"
            name="password"
			title="Password"
            placeholder="●●●●●●●●"
			icon="heroicon-s-lock-closed"
			eye
            required
          />
		  <x-password
            id="confirm-password"
            type="password"
            name="password"
			title="Password confirmation"
            placeholder="●●●●●●●●"
			icon="heroicon-s-lock-closed"
			eye
            required
          />
		  <x-button class="col-start-2 justify-self-end" type="submit" label="Register"/>
		</form>
      </x-tab>
	</x-tabs>
  </x-card>
</x-modal>