03 · Components · 선택

세그먼트 컨트롤Segmented Control

2~4개의 상호 배타적 뷰 모드를 전환. 화면 상단의 "리스트/그리드", "월/주/일" 같이 레이아웃이나 관점을 바꾸는 선택에 적합합니다.

StableWCAG AA

기본

tsx
const [view, setView] = useState("grid");

<SegmentedControl
  aria-label="보기 방식"
  value={view}
  onChange={setView}
  options={[
    { value: "grid", label: "그리드" },
    { value: "list", label: "리스트" },
  ]}
/>
미리보기

현재 선택: grid

Need Help

도움이 필요하신가요?

주님의교회 PCL 디자인 시스템을 적용하시다가 막히는 부분이 있다면, 다음 경로로 직접 문의하실 수 있습니다.