CoreRadio

Usage

기본 사용법

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

<CoreRadio label="라벨" name="term" value="0" />
<CoreRadio label="라벨" name="term" value="1" />

라디오 그룹

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

<div>
  <CoreRadio label="옵션 1" name="option" value="1" />
  <CoreRadio label="옵션 2" name="option" value="2" />
  <CoreRadio label="옵션 3" name="option" value="3" />
</div>

제어된 컴포넌트 (Controlled Component)

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

const [selected, setSelected] = useState('option1');

<div>
  <CoreRadio 
    label="옵션 1" 
    name="option" 
    value="option1" 
    checked={selected === 'option1'}
    onChange={(e) => setSelected(e.target.value)}
  />
  <CoreRadio 
    label="옵션 2" 
    name="option" 
    value="option2" 
    checked={selected === 'option2'}
    onChange={(e) => setSelected(e.target.value)}
  />
</div>

비제어 컴포넌트 (Uncontrolled Component)

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

<div>
  <CoreRadio label="옵션 1" name="option" value="1" defaultChecked />
  <CoreRadio label="옵션 2" name="option" value="2" />
  <CoreRadio label="옵션 3" name="option" value="3" />
</div>

비활성화 상태

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

<div>
  <CoreRadio label="옵션 1" name="option" value="1" disabled />
  <CoreRadio label="옵션 2" name="option" value="2" checked disabled />
</div>

커스텀 라벨

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

<CoreRadio 
  label={
    <div>
      <strong>강조된 텍스트</strong>
      <span>일반 텍스트</span>
    </div>
  } 
  name="option" 
  value="1" 
/>

Props

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

Prop

Type

스타일

기본 스타일 속성

Label:

display: flex
justify-content: flex-start
gap: spacing-150 (6px)
width: 100%
height: 100%
min-height: 18px

Input:

opacity: 0
position: absolute

Icon Wrapper:

display: none (기본값, 상태에 따라 변경)
position: relative
width: 16px
height: 16px
flex-shrink: 0
cursor: pointer

Icon:

position: absolute
top: 50%
left: 50%
width: 19px
height: 18px
transform: translate(-50%, -50%)

Label Text:

typography: body[2]
color: inherit

States (상태별 토큰)

Icon Wrapper:

Disabled: cursor: not-allowed

Icon (Default - 체크되지 않은 상태):

Default: stroke: toggle-primary[3]
Hover (not disabled): fill: toggle-hover-bg
Disabled: stroke: toggle-disabled-border, fill: toggle-disabled-bg

Icon (Checked - 체크된 상태):

Default: stroke: toggle-primary[1]
Hover (not disabled): stroke: toggle-primary[2]
Disabled: stroke: toggle-disabled-border

Icon (Outline - Focus 상태):

Default: display: none
Focus: display: block, stroke: focus 색상

Label Text:

Disabled: color: toggle-disabled-text, cursor: not-allowed

On this page