Align label and select dropdown in the same row in the sweetalert 2

Question

I am looking for example where I can align label and dropdown in the same row using sweetalert2.

I have tried to add custom label to achieve this but it is going in the different line and I would like to console the selected dropdown on click of OK button.

Below is my stackblitz.

https://stackblitz.com/edit/angular-sweetalert-dropdown

Answer 1

Use inputLabel + customClass params:

Swal.fire({
  title: 'Select + label in one row',
  input: 'select',
  inputOptions: {
    apples: 'Apples',
    bananas: 'Bananas',
    oranges: 'Oranges'
  },
  inputLabel: 'Select a fruit',
  customClass: {
    input: 'inline-flex',
    inputLabel: 'inline-flex'
  }
})

.inline-flex {
  display: inline-flex !important;
  margin: .5em !important;
}

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script> 

Read more about customClass: https://sweetalert2.github.io/#customClass