SettingsSwitch

켜고 끄는 스위치다. 설정 행의 오른쪽에 놓는다.

이 페이지의 목차

미리보기
언제 쓰는가
종류
크기
상태
사용 방법
속성(props)
치수와 토큰
접근성
잘한 예와 잘못한 예
함께 보는 컴포넌트

분류: 입력과 선택
가져오기: import { SettingsSwitch } from '@/ui/SettingsList'
코드 위치: apps/mobile/src/ui/SettingsList.tsx:98

미리보기#

실제 컴포넌트를 화면에 그린 것이다. 화면 아래의 서비스 색 선택기로 색을 바꿔 볼 수 있다. 버튼과 입력 칸은 직접 눌러 볼 수 있다.

눌러서 바꾸기

켜짐

언제 쓰는가#

쓴다

설정을 켜고 끌 때 쓴다. 누르는 즉시 값이 바뀌고 따로 저장 버튼이 없을 때 쓴다.
SettingsRow의 right에 넣어 쓴다.
label에 무엇을 켜고 끄는지 쓴다.

쓰지 않는다

저장 버튼이 필요한 양식에는 쓰지 않는다. ChoiceCard나 체크 항목을 쓴다.
둘 중 하나를 고르는 데 쓰지 않는다("라이트/다크"). PillTabs나 OptionSheet를 쓴다.

종류#

종류가 없다.

크기#

크기를 정하는 속성이 없다. 운영체제의 기본 스위치 크기를 따른다. 이 문서의 미리보기는 51 × 31이다.

상태#

꺼짐

켜짐

비활성

SettingsSwitch 상태
상태	모습과 동작
꺼짐	트랙이 `lineStrong`, 손잡이는 흰색.
켜짐	트랙이 `primary`.
비활성	`disabled`이면 누를 수 없다.

사용 방법#

설정 행 안에서

import { SettingsRow, SettingsSwitch } from '@/ui/SettingsList';

<SettingsRow title="복습 알림" chevron={false} right={<SettingsSwitch label="복습 알림" value={on} onChange={setOn} />} />

속성(props)#

SettingsSwitch 속성
이름	타입	기본값	필수	설명
`value`	boolean	—	필수	켜져 있는지.
`onChange`	(v: boolean) => void	—	필수	눌렀을 때 새 값(`true`/`false`)과 함께 호출된다.
`label`	string	—	필수	화면 읽기 프로그램이 읽는 이름.
`disabled`	boolean	—	선택	`true`이면 누를 수 없다.

치수와 토큰#

색: 꺼짐 트랙 lineStrong, 켜짐 트랙 primary, 손잡이 white
구현: React Native Switch를 쓰므로 모양은 운영체제가 정한다

접근성#

이름은 label이다. 상태(켜짐/꺼짐)는 운영체제가 전달한다.
켜짐은 트랙 색과 손잡이 위치로 함께 나타낸다.
눌리는 영역은 운영체제 스위치 크기를 따른다. 스위치만 누르게 하지 말고 행 전체에도 이름을 둔다.

글자 색 대비

글자 크기별 기준: 작은 글자는 4.5:1 이상, 큰 글자(굵은 18.66px 이상)는 3:1 이상이다. 값은 선택한 서비스와 모드의 토큰으로 계산했다.

SettingsSwitch 글자 색 대비
쓰임	글자색	바탕	대비	기준
켜진 트랙과 손잡이 (비글자)	`white`	`primary`	3.93:1 통과3.31:1 통과4.60:1 통과1.98:1 미달	3:1 (큰 글자)

잘한 예와 잘못한 예#

잘한 예label이 행 제목과 같다.

잘못한 예label 없이 쓰지 않는다. 읽기 프로그램이 "스위치"라고만 읽는다.

SettingsGroup: 설정 화면의 목록이다. 작은 구역 이름, 행이 든 흰 패널, 아래 안내 글로 이루어진다.
PillTabs: 알약 모양의 탭 모음이다. 하나를 고르면 그 칸이 짙은 색(네이비, 다크 모드는 주색)으로 채워진다.