Livewire Alert Livewire Alert

Core Pattern

Inputs

Collect small pieces of input directly inside an alert and receive the value in a Livewire event handler.

Text input

Text inputs return the entered string as $data['value'].

Live demo
SweetAlert2
PHP
LivewireAlert 
LivewireAlert::title('Enter your name')
    ->withTextInput(label: 'Full name', placeholder: 'John Doe')
    ->withConfirmButton('Submit')
    ->onConfirm('saveName')
    ->show();

public function saveName(array $data)
{
    $name = $data['value'];
}

Email and number

Use the dedicated input helpers when browser-level input behavior matters.

Live demo
SweetAlert2
PHP
LivewireAlert 
LivewireAlert::title('Your email')
    ->withEmailInput(placeholder: 'you@example.com')
    ->withConfirmButton('Submit')
    ->onConfirm('saveEmail')
    ->show();

LivewireAlert::title('Quantity')
    ->withNumberInput(placeholder: '1')
    ->withConfirmButton('OK')
    ->onConfirm('saveQty')
    ->show();

Select and radio

Select and radio inputs return the selected option key.

Live demo
SweetAlert2
PHP
LivewireAlert 
LivewireAlert::title('Choose a size')
    ->withSelectInput(
        options: ['s' => 'Small', 'm' => 'Medium', 'l' => 'Large'],
        label: 'Size',
    )
    ->withConfirmButton('Confirm')
    ->onConfirm('processSelection')
    ->show();

public function processSelection(array $data)
{
    $size = $data['value'];
}

Checkbox and file

Checkbox values return 1 when checked and null otherwise. File inputs are available for SweetAlert2 file prompts.

Live demo
SweetAlert2
PHP
LivewireAlert 
LivewireAlert::title('Terms')
    ->withCheckboxInput(label: 'I agree to the terms')
    ->withConfirmButton('Continue')
    ->onConfirm('acceptTerms')
    ->show();

LivewireAlert::title('Upload')
    ->withFileInput(label: 'Choose a file')
    ->withConfirmButton('Upload')
    ->onConfirm('handleUpload')
    ->show();

Handling values

Every input event payload includes the value under $data['value'].

  • Text, email, password, number, and textarea inputs return the entered value.
  • Select and radio inputs return the selected option key.
  • Checkbox inputs return 1 when checked and null otherwise.