Radio

Radio는 사용자가 여러 옵션 중에서 하나만 선택할 수 있도록 하는 컴포넌트입니다. 단일 선택이 필요한 경우에 사용됩니다.

인터랙티브 예제

아래 UI에서 다양한 속성을 직접 변경하여 Radio 컴포넌트의 모습을 확인해보세요.

라디오 버튼추가 텍스트

sizeselect

라디오 버튼의 크기

옵션을 선택해주세요.smmd

textstring

라디오 버튼의 텍스트

supportTextstring

라디오 버튼의 추가 텍스트

disabledboolean

라디오 버튼의 비활성화 여부

기본 사용법

import { Radio } from '@ncds/ui-admin';

function App() {
  return <Radio text="라디오 옵션" />;
}

라디오 옵션

라디오 옵션

Props

Prop	Type	Default	Description
size	'sm' | 'md'	'sm'	라디오 버튼의 크기
radioRef	RefCallback<HTMLInputElement> | MutableRefObject<HTMLInputElement | null>	-	라디오 버튼에 대한 참조
onChange	(e: ChangeEvent<HTMLInputElement>) => void	-	값이 변경될 때 호출되는 함수

상세 예제 (Detailed Examples)

크기 (Size)

라디오 버튼은 sm(작음)과 md(중간) 두 가지 크기로 제공됩니다.

작은 라디오 (sm)

작은 라디오 (sm)

중간 라디오 (md)

중간 라디오 (md)

상태 (States)

라디오 버튼은 다양한 상태를 지원합니다: 기본, 선택됨, 비활성화.

기본 라디오

기본 라디오

선택된 라디오

선택된 라디오

비활성화된 라디오

비활성화된 라디오

비활성화 및 선택된 라디오

비활성화 및 선택된 라디오

부가 텍스트 (Support Text)

라디오 버튼에 추가 설명 텍스트를 포함할 수 있습니다.

정기 결제 동의매월 자동으로 결제가 진행됩니다.

정기 결제 동의매월 자동으로 결제가 진행됩니다.

에러 표시 (Destructive)

에러가 발생했을 때 노출되는 라디오 버튼은 destructive 속성을 통해 강조할 수 있습니다.

계정 삭제에 동의합니다

계정 삭제에 동의합니다

이벤트 처리 (Event Handling)

라디오 버튼의 상태 변경을 감지하고 처리하는 방법입니다.

import { Radio } from '@ncds/ui-admin';
import { useState } from 'react';

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

  const handleChange = (e) => {
    setSelected(e.target.value);
    console.log(`선택된 옵션: ${e.target.value}`);
  };

  return (
    <>
      <Radio text="옵션 1" value="option1" checked={selected === 'option1'} onChange={handleChange} />
      <Radio text="옵션 2" value="option2" checked={selected === 'option2'} onChange={handleChange} />
    </>
  );
}