선택 (체크·세그먼트·스위치)

둘 중 하나는 세그먼트, 켬/끔은 스위치, 여럿 고르기는 체크박스, 시니어 화면의 고르기는 큰 카드 버튼. 판정(적합/부적합)은 항상 세그먼트가 아니라 큰 카드 두 개입니다.

정의

종류	고르는 수	즉시 적용?	예
세그먼트 `.fna-seg`	2~4 중 하나	예 (보기 전환)	차트 / 표 · 오늘 / 7일 · ℃ / ℉
스위치 `.fna-switch`	켬 / 끔	예	큰글씨 모드 · 경보 알림
체크박스 `.fna-checkbox`	0~여럿	아니오 (저장 필요)	표 행 선택 · 동의
라디오 (네이티브)	여럿 중 하나	아니오	반려 사유 고르기(데스크톱)
선택 카드 `.fna-choice`	여럿 중 하나	아니오	시니어: 적합 / 부적합 · 반려 사유

언제 쓰고 언제 쓰지 않나

세그먼트는 보기를 바꿀 때. 데이터를 바꾸는 판정(적합/부적합)에는 쓰지 않는다 — 실수로 스치기 쉽다.
스위치는 누르는 즉시 효과가 나야 한다. "저장" 버튼이 따로 필요하면 체크박스.
터치 화면·시니어에서는 라디오 대신 선택 카드(72px).

해부도 — 선택 카드

카드 (≥72)테두리 2px, 라운드 16. 선택되면 primary 테두리 + primary-container 배경 + 안쪽 1px 링
마크 28원형 라디오 대체. 선택 시 primary 채움 + 체크
라벨 20px 700한 단어~한 구
설명(선택).8em regular muted — 판정 기준을 여기 적는다

변형

세그먼트 — 보기 전환

℃℉

코드

<div class="fna-row" style="gap:24px">
    <div class="fna-seg" role="group" aria-label="보기"><button class="is-active" aria-pressed="true">차트</button><button aria-pressed="false">표</button></div>
    <div class="fna-seg" role="group" aria-label="기간"><button class="is-active">오늘</button><button>7일</button><button>30일</button></div>
    <div class="fna-seg" role="radiogroup" aria-label="단위"><label><input type="radio" name="unit" checked><span>℃</span></label><label><input type="radio" name="unit"><span>℉</span></label></div>
  </div>

스위치 · 체크박스

경보 푸시 알림켬

큰글씨 모드끔

냉동창고 A 냉동창고 B 전처리실 (센서 없음)

코드

<div style="display:flex;flex-direction:column;gap:14px;max-width:360px">
    <div style="display:flex;align-items:center;gap:12px"><span>경보 푸시 알림</span><span class="fna-switch is-on" role="switch" aria-checked="true" tabindex="0"><i></i>켬</span></div>
    <div style="display:flex;align-items:center;gap:12px"><span>큰글씨 모드</span><span class="fna-switch" role="switch" aria-checked="false" tabindex="0"><i></i>끔</span></div>
    <label class="fna-checkbox"><input type="checkbox" checked>냉동창고 A</label>
    <label class="fna-checkbox"><input type="checkbox">냉동창고 B</label>
    <label class="fna-checkbox"><input type="checkbox" disabled>전처리실 (센서 없음)</label>
  </div>

선택 카드 — 시니어 판정 · 반려 사유

코드

<div class="fna-choice" style="max-width:400px" role="radiogroup" aria-label="반려 사유">
    <button class="fna-choice__item" role="radio" aria-checked="false"><span class="mark"></span><span>측정 기록 누락<small>미수신 구간 확인</small></span></button>
    <button class="fna-choice__item is-selected" role="radio" aria-checked="true"><span class="mark">✓</span><span>기록 값 오류<small>온도·기준 재확인 필요</small></span></button>
    <button class="fna-choice__item" role="radio" aria-checked="false"><span class="mark"></span><span>작성 내용 불충분</span></button>
    <button class="fna-choice__item" role="radio" aria-checked="false"><span class="mark"></span><span>기타 (직접 입력)</span></button>
  </div>

상태

기본

호버

선택

포커스

비활성

치수

항목	값	비고
세그먼트 컨테이너	패딩 3 · 라운드 8 · 간격 2	안쪽 버튼 라운드 6 (8 − 2)
세그먼트 버튼	.4em 1em · 13/700	활성: surface 배경 + primary 글자 + 카드 그림자
스위치	40 × 22 · 손잡이 16	켬 primary · 끔 border-strong. 히트 영역 44
체크박스	1.15em (≈16) · accent primary	라벨 포함 히트 영역 44
선택 카드	≥72 · 패딩 12/16 · 테두리 2 · 라운드 16	마크 28, 라벨 20/700, 카드 사이 12

Do · Don't

Do 판정은 큰 카드 둘, 기준을 설명에

Don't 판정을 세그먼트로스치면 바뀌고 무엇이 선택됐는지 약하다

켬

Do 스위치 옆에 현재 상태 글자

… 저장 버튼을 눌러야 적용됨

Don't 색만 있는 스위치 · 저장이 필요한 설정에 스위치

접근성

세그먼트: 보기 전환은 role="group" + aria-pressed, 값 선택은 숨은 라디오 + label(키보드 화살표 이동이 공짜).
스위치: role="switch" aria-checked, Space 로 전환, 상태 글자 동반.
선택 카드: role="radiogroup" / role="radio" aria-checked, 화살표로 이동, Space 로 선택.
선택 상태는 테두리 + 배경 + 체크 마크 세 가지로 — 색만이 아니다.
체크박스 accent-color 는 primary, 다크에서는 primary(연파랑) 위 짙은 체크로 자동.

문구

세그먼트 라벨은 대등한 명사 짝(차트/표, 오늘/7일). 스위치는 기능 이름 + 상태 글자(켬/끔). 판정 카드는 "적합/부적합"이라는 기록 용어 그대로(합격/불합격, OK/NG 아님). 설명에는 판정 기준을 한 줄로.

코드

<div class="fna-seg" role="group" aria-label="보기"><button class="is-active" aria-pressed="true">차트</button><button aria-pressed="false">표</button></div>
<div class="fna-seg" role="radiogroup"><label><input type="radio" name="u" checked><span>℃</span></label>…</div>
<span class="fna-switch is-on" role="switch" aria-checked="true" tabindex="0"><i></i>켬</span>
<label class="fna-checkbox"><input type="checkbox">냉동창고 A</label>
<div class="fna-choice" role="radiogroup">
  <button class="fna-choice__item is-selected" role="radio" aria-checked="true"><span class="mark">✓</span><span>적합<small>시편 3종 모두 검출</small></span></button>
</div>
/* RN 시니어 */ <Choice options={[…]} value={v} onChange={…} columns={2}/>  (senior/ui.tsx)

안정마지막 갱신 2026-09-29담당 디자인시스템 TF · jjo831@farmzone.kr소스 components.css .fna-checkbox · .fna-seg · .fna-switch · .fna-choiceComponents · FNA 디자인 시스템 v1.0