SweetAlert2에서 입력값 받아오기｜사용자 입력 처리 방법과 예제

글쓴이 FinBapa / 2025년 07월 21일

sweetalert2 입력값 받아오기는 SweetAlert2를 사용하면 기본 alert 창보다 더 예쁘고 실용적인 입력 폼을 만들 수 있습니다. 이 글에서는 사용자로부터 입력값을 받아오는 방법과 콜백 처리까지 실전 예제로 정리합니다. prompt()보다 훨씬 유연해요!

목차

sweetalert2 input 기본 사용법

Swal.fire({
  title: '이름을 입력하세요',
  input: 'text',
  inputLabel: '이름',
  inputPlaceholder: '홍길동',
}).then((result) => {
  if (result.value) {
    Swal.fire({title:'입력값', text:result.value, icon:'success'});
  }
});

Swal.fire({
  title: '이름을 입력하세요',
  input: 'text',
  inputLabel: '이름',
  inputPlaceholder: '홍길동',
}).then((result) => {
  if (result.value) {
    Swal.fire({title:'입력값', text:result.value, icon:'success'});
  }
});

JavaScript

다양한 input 타입 지원

text : 일반 텍스트
email : 이메일 형식
password : 비밀번호
number : 숫자
textarea : 여러 줄 입력
select : 드롭다운
radio : 단일 선택
checkbox : 체크박스

select 예제

Swal.fire({
  title: '도시를 선택하세요',
  input: 'select',
  inputOptions: {
    seoul: '서울',
    busan: '부산',
    daegu: '대구',
  },
  inputPlaceholder: '도시 선택',
}).then((result) => {
  if (result.value) {
    console.log('선택된 도시:', result.value);
  }
});

Swal.fire({
  title: '도시를 선택하세요',
  input: 'select',
  inputOptions: {
    seoul: '서울',
    busan: '부산',
    daegu: '대구',
  },
  inputPlaceholder: '도시 선택',
}).then((result) => {
  if (result.value) {
    console.log('선택된 도시:', result.value);
  }
});

JavaScript

✅마무리

예제의 경우 워드프레스 아스트라 CSS와 충돌로 조금 틀어지는 부분이 있지만, 기능은 문제가 없어 보이네요 ^^;
깔끔한 모달창 UI로 사용자 편의성이 높습니다.
반응형으로 모든 뷰에 다 적용 됩니다.
심플한 형태의 입력 폼은 SweetAlert2 사용을 추천 드립니다.

관련 포스팅