Open터미널 열기
마크다운으로 복사링크 공유

스위치

켜고 끄는 설정 하나를 바로 반영해요. 누르는 즉시 적용되고 저장 버튼이 필요 없어요.

모바일PCSwitch관련 칩 · 카드 골격

고르기#

이 부품을 언제 쓰고, 언제 다른 것을 쓰는지예요.

언제 쓰나#

  • 바로 반영되는 켜고 끄기 하나.

쓰지 말아야 할 때 · 대신 쓸 것#

  • 제출해야 적용되는 폼 안 → 칩

사용 예제#

할 일마다 실물과 코드예요. 편집을 누르면 코드를 고쳐 바로 볼 수 있어요.

설정 바로 바꾸기#

누르는 즉시 반영돼요. 저장 버튼이 없어요.

못 바꾸게 하기#

왜 못 바꾸는지는 이름에 적어요.

해부도#

  1. 1

    트랙

    44×26px이에요. 켜지면 브랜드 파랑이에요.

  2. 2

    손잡이

    20px 흰 원이 18px 옆으로 움직여요.

속성#

State#

켜짐은 브랜드 파랑, 꺼짐은 회색, 못 바꾸면 40%예요.

인터페이스#

타입에서 자동으로 뽑은 표예요.

Switch#

속성기본값타입설명
on*-boolean켜졌는지예요.
onChange*-(v: boolean) => void값이 바뀌면 새 값으로 불러요.
label*-string화면 읽기 프로그램이 읽는 이름(aria-label)이에요.
disabled-boolean못 누르게 하고 40%로 흐려요.
className-string배치용 클래스예요. 모양(색·크기)은 덮어쓰지 않아요.

* 필수예요. 표는 타입에서 자동으로 뽑았어요.

스펙#

상태 · 슬롯마다 실제로 그려지는 값이에요.

Switch#

base

상태슬롯속성값
enabledtrack누르는 칸높이 44px 이상
높이26px
폭44px
모서리완전 원(9999px)
전환 대상색·눌림 크기
시간200ms
thumb크기20px
모서리완전 원(9999px)
배경색#ffffff
그림자shadow-sm
전환 대상위치·크기
시간200ms
이징ease-out
pressedtrack크기 배율(기본)0.975 · 버튼 공통 규칙
disabledtrack투명도40%

on=true

상태슬롯속성값
enabledtrack배경색brand
thumb가로 이동18px

값은 컴포넌트 코드에서 뽑았고, 토큰 이름을 누르면 파운데이션으로 가요. 토큰이 없는 값만 숫자로 적었어요.

접근성#

역할과 속성#

요소역할 · 속성
Switchbutton · role="switch" · aria-checked
labelaria-label

키보드#

키동작
Tab다음 스위치로 옮겨요
Enter · Space켜고 꺼요

화면 읽기 프로그램#

  • "알림, 스위치, 켬"처럼 읽혀요.

초점#

  • 보이는 트랙은 26px이지만 누르는 높이는 44px이에요.

가이드라인#

이렇게 써요#

쓰는 규칙#

이렇게 써요

  • label에 무엇이 켜지는지 적어요.
  • 바로 반영되는 설정에만 써요.

이렇게 하지 않아요

  • 제출 버튼을 눌러야 적용되는 폼 안에서 쓰지 않아요 - 그때는 체크박스예요.

문구#

  • label에는 켜지는 것의 이름만 적어요("새 실거래 알림").
  • "켜기" "끄기" 같은 동사는 붙이지 않아요.

플랫폼별 차이#

플랫폼별 차이
플랫폼차이
모바일

PC와 같은 모양이에요. 글자 역할만 폰 크기로 바뀌어요.

PC

마우스가 있는 기기에서만 hover가 켜지고, 키보드 초점 링이 보여요.