Checkbox & Radio

Checkbox 는 다중 선택, Radio 는 단일 선택이에요. 옵션 고르기나 동의 확인에 써요.

Anatomy

둘은 컨트롤 모양만 달라요. 체크박스는 6px 라운드 박스, 라디오는 원형이에요.

01
Control
체크박스는 6px 라운드 박스(radius-xs), 라디오는 원형. 21×21px (터치 영역 32×32)
02
Icon / Dot
선택 상태 표시. 체크박스는 체크 아이콘, 라디오는 내부 원(dot)
03
Label
옵션 설명 텍스트. 컨트롤 오른쪽, gap 0(히트 영역 32 가 간격을 만들어요)

Properties

Base

Checkbox 는 미선택·선택·부분 선택·비활성 네 상태, Radio 는 부분 선택이 없는 세 상태예요. 컨트롤 21×21px(터치 32×32), Disabled 는 투명도 60% 예요.

Case

Guidelines

다중 선택에는 Checkbox, 단일 선택에는 Radio 를 써요.
Radio 엔 부분 선택이 없어요. 전체 선택 제어는 Checkbox 그룹으로 해요.
레이블은 컨트롤 오른쪽에 붙여요. 히트 영역이 넓어 gap 없이도 간격이 생겨요.
Disabled 는 투명도 60% 예요. 컴포넌트마다 다른 건 의도예요.

Specification

Disabled 는 투명도 60% 예요. PDS 에서 가장 높은 값이고, 컴포넌트마다 다른 건 의도예요.

Checkbox

Checkbox 치수와 색상
속성	값	설명
size	`21×21px`	터치 영역 32×32
border-radius	`--radius-xs (6px)`
border (unchecked)	`2px solid --color-line-normal (#c9cdd2)`
background (checked)	`--color-accent-normal (#1d7ff9)`	테두리도 같은 색
accent tone	`brand --color-accent-normal · ai --color-ai-normal`	Figma purple variant
check icon	`11×8px`	stroke white 2px
indeterminate bar	`12×2px`	white, border-radius 2px
label gap	`0`	히트 영역 32×32 가 박스(21)보다 넓어 간격이 생긴다
disabled opacity	`60%`	Figma 미정의 (문서 정본 유지)

Radio

Radio 치수와 색상
속성	값	설명
size	`21×21px`	터치 영역 32×32
border-radius	`50%`
border (unchecked)	`2px solid --color-line-normal (#c9cdd2)`
border (checked)	`2px solid --color-accent-normal`	ai 톤은 --color-ai-normal
dot size	`8×8px`	filled accent
label gap	`0`	히트 영역 32×32 가 박스(21)보다 넓어 간격이 생긴다
disabled opacity	`60%`	Figma 미정의 (문서 정본 유지)

설치

npm i @polarisoffice/pds-react

Checkbox

미선택 · 선택됨 · 부분 선택(indeterminate) · 비활성화.

import { Checkbox, Radio, RadioGroup } from '@polarisoffice/pds-react';

<Checkbox label="항목 1" />
<Checkbox label="항목 2" checked />
<Checkbox label="전체 선택" indeterminate />
<Checkbox label="비활성화" disabled />

Radio

그룹 안에서 하나만 선택돼요. 라디오에는 부분 선택이 없어요.

import { Checkbox, Radio, RadioGroup } from '@polarisoffice/pds-react';

<RadioGroup name="plan" defaultValue="basic">
  <Radio value="basic" label="Basic" />
  <Radio value="pro" label="Pro" />
  <Radio value="off" label="비활성화" disabled />
</RadioGroup>

Checkbox 그룹

「전체 선택」이 하위 항목을 제어하고, 일부만 선택되면 부분 선택 상태가 돼요.

import { Checkbox, Radio, RadioGroup } from '@polarisoffice/pds-react';
import { useState } from 'react';

const [items, setItems] = useState([true, false, false]);
const all = items.every(Boolean);
const some = items.some(Boolean) && !all;

<Checkbox
  label="전체 선택"
  checked={all}
  indeterminate={some}
  onChange={(next) => setItems(items.map(() => next))}
/>
{items.map((on, i) => (
  <Checkbox
    key={i}
    label={`항목 ${i + 1}`}
    checked={on}
    onChange={(next) => setItems(items.map((v, j) => (i === j ? next : v)))}
  />
))}