CoreToggle

개요

마이그레이션 안내 — 이 컴포넌트는 레거시입니다. 신규 프로젝트에서는 Switch를 사용하세요.

CoreToggle은 단일 컴포넌트 기반 on/off 토글 스위치입니다.

2가지 size — sm, md
text — [on 텍스트, off 텍스트] 쌍으로 상태 표시
textPosition — 텍스트를 left 또는 right에 배치
Controlled / Uncontrolled 모두 지원
네이티브 <input type="checkbox"> 기반 — checked 상태로 토글 구현

Usage

기본 사용법 (텍스트 없음)

() => {
const [checked, setChecked] = React.useState(false);
return (
  <HStack $css={{ gap: '16px', alignItems: 'center' }}>
    <CoreToggle size="sm" checked={checked} onClick={(e) => setChecked(e.currentTarget.checked)} />
    <CoreToggle size="md" checked={checked} onClick={(e) => setChecked(e.currentTarget.checked)} />
  </HStack>
);
}

텍스트와 함께

() => {
const [checked, setChecked] = React.useState(true);
return (
  <VStack $css={{ gap: '8px' }}>
    <CoreToggle
      size="md"
      text={['켜짐', '꺼짐']}
      textPosition="left"
      checked={checked}
      onClick={(e) => setChecked(e.currentTarget.checked)}
    />
    <CoreToggle
      size="md"
      text={['켜짐', '꺼짐']}
      textPosition="right"
      checked={checked}
      onClick={(e) => setChecked(e.currentTarget.checked)}
    />
  </VStack>
);
}

Uncontrolled

<VStack $css={{ gap: '8px' }}>
<CoreToggle size="md" defaultChecked />
<CoreToggle size="md" text={['On', 'Off']} defaultChecked />
</VStack>

비활성화 상태

<VStack $css={{ gap: '8px' }}>
<CoreToggle size="md" text={['On', 'Off']} checked disabled />
<CoreToggle size="md" text={['On', 'Off']} checked={false} disabled />
</VStack>

Props

ComponentPropsWithoutRef<'input'>을 확장한 컴포넌트입니다.

Prop

Type

CoreToggleSize

Prop

Type

CoreToggleTextPosition

Prop

Type

스타일

Size Variants

Size	Width	Height	Circle 크기
`sm`	`32px`	`16px`	`10 × 10px`
`md`	`48px`	`24px`	`18 × 18px`

Circle은 unchecked 시 left: 3px, checked 시 left: calc(100% - circle - 3px) 위치로 이동합니다.

States — 상태별 토큰

상태	배경색
Checked	`toggle-primary[1]`
Checked + Hover	`toggle-primary[2]`
Unchecked	`toggle-off-bg`
Unchecked + Hover	`toggle-off-hover`
Disabled	`toggle-disabled-bg`

마이그레이션 가이드

Switch는 접근성 기반 ARIA 패턴을 준수하며 Compound composition 구조를 제공합니다.

Before / After

// Before (CoreToggle)
<CoreToggle
  size="md"
  text={['켜짐', '꺼짐']}
  textPosition="right"
  checked={enabled}
  onClick={(e) => setEnabled(e.currentTarget.checked)}
/>

// After (Switch)
<Label.Root>
  <Label.Text>켜짐</Label.Text>
  <Switch.Root checked={enabled} onCheckedChange={setEnabled}>
    <Switch.Thumb />
  </Switch.Root>
</Label.Root>

변경 사항

CoreToggle	Switch
`text` prop	`Label.Root` + `Label.Text`로 감싸기
`textPosition`	`Label.Text`를 `Switch.Root` 앞/뒤에 배치
`onClick={(e) => e.currentTarget.checked}`	`onCheckedChange={(val) => ...}`
`checked`	`checked` (동일)
`defaultChecked`	`defaultChecked` (동일)

On this page