Search code examples
checkboxsweetalert2

how to change the position of Checkbox in sweetalert 2

I'm looking for a way to find if it is possible to change the position of the checkbox in sweetalert 2 from the center to the upper position? I used this code:

(async () => {

          const { value: accept } = await Swal.fire({
            title: 'Terms and conditions',
            input: 'checkbox',
            inputValue: 1,
            inputPlaceholder:
              'Yes, I agree to receive an email, including educational materials, product and company announcements, and community even information, from T&C. I can unsubscribe at any time. I would like to opt into receiving marketing communications as outlined above.',
            confirmButtonText:
              'Continue <i class="fa fa-arrow-right"></i>',
            inputValidator: (result) => {
              return !result && 'You need to agree with T&C'
            }
          })
          
          if (accept) {
            Swal.fire('You agreed with T&C :)')
          }
          
          })()

The result of this code is this: enter image description here

I would like to change the checkbox from the center to the position of the word "Yes".

Solution

  • Use the customClass param to achieve the custom placement for the input:

    Swal.fire({
  input: 'checkbox',
  inputPlaceholder: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
  customClass: {
    input: 'top-checkbox'
  }
})
    .top-checkbox input {
  align-self: flex-start;
  margin: 3px 10px 0 0 !important;
}
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>