CoreToggle

Usage

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

import { useState } from 'react';
import { CoreToggle } from '@featuring-corp/components';

const [checked, setChecked] = useState(false);

<CoreToggle
  size="md"
  checked={checked}
  onClick={(e) => setChecked(e.currentTarget.checked)}
/>

텍스트와 함께 사용

import { useState } from 'react';
import { CoreToggle } from '@featuring-corp/components';

const [checked, setChecked] = useState(false);

<CoreToggle
  size="md"
  text={['On', 'Off']}
  textPosition="left"
  checked={checked}
  onClick={(e) => setChecked(e.currentTarget.checked)}
/>

<CoreToggle
  size="md"
  text={['On', 'Off']}
  textPosition="right"
  checked={checked}
  onClick={(e) => setChecked(e.currentTarget.checked)}
/>

크기 설정

import { useState } from 'react';
import { CoreToggle } from '@featuring-corp/components';

const [checked, setChecked] = useState(false);

// Small
<CoreToggle
  size="sm"
  checked={checked}
  onClick={(e) => setChecked(e.currentTarget.checked)}
/>

// Medium
<CoreToggle
  size="md"
  checked={checked}
  onClick={(e) => setChecked(e.currentTarget.checked)}
/>

비제어 컴포넌트 (Uncontrolled Component)

import { CoreToggle } from '@featuring-corp/components';

<CoreToggle size="md" defaultChecked />
<CoreToggle size="md" text={['On', 'Off']} defaultChecked />

비활성화 상태

import { CoreToggle } from '@featuring-corp/components';

<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
  <CoreToggle size="md" text={['On', 'Off']} checked disabled />
  <CoreToggle size="md" text={['On', 'Off']} checked={false} disabled />
</div>

Props

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

Prop

Type

CoreToggleSize

Prop

Type

CoreToggleTextPosition

Prop

Type

스타일

기본 스타일 속성

display: flex (컨테이너)
justify-content: center
align-items: center
gap: spacing-200 (8px)
border-radius: radius-full
transition: 0.2s
flex-shrink: 0
position: relative

Size Variants

Size	Width	Height	Toggle Circle Size	Toggle Circle Position (unchecked)	Toggle Circle Position (checked)
`sm`	`32px`	`16px`	`10px × 10px`	`left: 3px`	`left: calc(100% - 10px - 3px)`
`md`	`48px`	`24px`	`18px × 18px`	`left: 3px`	`left: calc(100% - 18px - 3px)`

States (상태별 토큰)

Checked: background-color: toggle-primary[1]
Checked + Hover: background-color: toggle-primary[2]
Not Checked: background-color: toggle-off-bg
Not Checked + Hover: background-color: toggle-off-hover
Disabled: background-color: toggle-disabled-bg
Disabled + Hover: background-color: toggle-disabled-bg (변경 없음)
Text (Disabled): color: toggle-disabled-text

On this page