Radio

라디오 버튼 컴포넌트는 여러 옵션 중 하나를 선택하는 폼 요소입니다.

기본 사용법

라디오 버튼 예제

비활성화 라디오 버튼 예제

import { RadioGroup, Radio } from '@aift/ui/Radio';

export default function Preview() {
  return (
    <div className="flex flex-col space-y-4">
      <Radio value="option1" id="radio-1" label="라디오 버튼 예제"/>
      <Radio value="option3" id="radio-3" disabled label="비활성화 라디오 버튼 예제"/>
    </div>
  );
}

import { RadioGroup, Radio } from '@aift/ui/Radio';export default function Preview() {  return (    <div className="flex flex-col space-y-4">      <Radio value="option1" id="radio-1" label="라디오 버튼 예제"/>      <Radio value="option3" id="radio-3" disabled label="비활성화 라디오 버튼 예제"/>    </div>  );}

Sizes

small 크기

medium 크기

'use client';

import { Radio, RadioGroup } from '@aift/ui/Radio';

export default function Sizes() {
  return (
    <div className="flex flex-col space-y-4">
      <RadioGroup name="radio-group" defaultValue="small">
        <Radio value="small" size="small" label="small 크기" />
        <Radio value="medium" size="medium" label="medium 크기" />
      </RadioGroup>
    </div>
  );
}

'use client';import { Radio, RadioGroup } from '@aift/ui/Radio';export default function Sizes() {  return (    <div className="flex flex-col space-y-4">      <RadioGroup name="radio-group" defaultValue="small">        <Radio value="small" size="small" label="small 크기" />        <Radio value="medium" size="medium" label="medium 크기" />      </RadioGroup>    </div>  );}

Group

라디오 버튼 그룹 예제 1

라디오 버튼 그룹 예제 2

라디오 버튼 그룹 예제 3

'use client';

import { RadioGroup, Radio } from '@aift/ui/Radio';

export default function Group() {
  return (
    <div className="space-y-4">
      <RadioGroup name="radio-group" defaultValue="option1">
        <Radio value="option1" label="라디오 버튼 그룹 예제 1" />
        <Radio value="option2" label="라디오 버튼 그룹 예제 2" />
        <Radio value="option3" label="라디오 버튼 그룹 예제 3" />
      </RadioGroup>
    </div>
  );
}

'use client';import { RadioGroup, Radio } from '@aift/ui/Radio';export default function Group() {  return (    <div className="space-y-4">      <RadioGroup name="radio-group" defaultValue="option1">        <Radio value="option1" label="라디오 버튼 그룹 예제 1" />        <Radio value="option2" label="라디오 버튼 그룹 예제 2" />        <Radio value="option3" label="라디오 버튼 그룹 예제 3" />      </RadioGroup>    </div>  );}

React Hook Form

'use client';

import { RadioGroup, Radio } from '@aift/ui/Radio';
import { Button } from '@aift/ui/Button';
import { useController, useForm } from 'react-hook-form';
import { useState } from 'react';

interface FormData {
  radio: string;
}

export default function ReactHookForm() {
  const {
    reset,
    handleSubmit,
    setValue,
    formState: { errors, isSubmitting },
    control,
  } = useForm<FormData>({
    mode: 'onSubmit',
    reValidateMode: 'onChange',
    defaultValues: {
      radio: 'banana',
    },
  });

  const { field } = useController({
    name: 'radio',
    control: control,
  });

  const [errorText, setErrorText] = useState<string>('');

  const onSubmit = (data: FormData) => {
    window.alert(JSON.stringify(data, null, 2));
  };

  const handleReset = () => {
    reset();
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <RadioGroup
        label="좋아하는 과일 선택"
        required
        errorMessage={errorText}
        description="좋아하는 과일을 선택해주세요."
        value={field.value}
        onValueChange={(value) => setValue('radio', value)}
      >
        <Radio value="apple" label="사과" />
        <Radio value="banana" label="바나나" />
        <Radio value="cherry" label="체리" />
      </RadioGroup>
      <div className="flex gap-2 mt-4">
        <Button type="button" variant="outlined" onClick={handleReset}>
          초기화
        </Button>
        <Button
          type="submit"
          disabled={isSubmitting}
          variant="contained"
          color="primary"
        >
          제출
        </Button>
      </div>
    </form>
  );
}

'use client';import { RadioGroup, Radio } from '@aift/ui/Radio';import { Button } from '@aift/ui/Button';import { useController, useForm } from 'react-hook-form';import { useState } from 'react';interface FormData {  radio: string;}export default function ReactHookForm() {  const {    reset,    handleSubmit,    setValue,    formState: { errors, isSubmitting },    control,  } = useForm<FormData>({    mode: 'onSubmit',    reValidateMode: 'onChange',    defaultValues: {      radio: 'banana',    },  });  const { field } = useController({    name: 'radio',    control: control,  });  const [errorText, setErrorText] = useState<string>('');  const onSubmit = (data: FormData) => {    window.alert(JSON.stringify(data, null, 2));  };  const handleReset = () => {    reset();  };  return (    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">      <RadioGroup        label="좋아하는 과일 선택"        required        errorMessage={errorText}        description="좋아하는 과일을 선택해주세요."        value={field.value}        onValueChange={(value) => setValue('radio', value)}      >        <Radio value="apple" label="사과" />        <Radio value="banana" label="바나나" />        <Radio value="cherry" label="체리" />      </RadioGroup>      <div className="flex gap-2 mt-4">        <Button type="button" variant="outlined" onClick={handleReset}>          초기화        </Button>        <Button          type="submit"          disabled={isSubmitting}          variant="contained"          color="primary"        >          제출        </Button>      </div>    </form>  );}

Props

`Radio`

Prop	Type	Default	Description
value	`string \| number`	-	라디오 버튼의 값
name	`string`	-	라디오 버튼 그룹 이름
id	`string`	-	라디오 버튼 ID
disabled	`boolean`	`false`	비활성화 여부
color	`'primary' \| 'positive' \| 'cautionary' \| 'destructive' \| 'info'`	`'primary'`	라디오 버튼 색상
size	`'small' \| 'medium'`	`'medium'`	라디오 버튼 크기
label	`React.ReactNode`	-	라디오 버튼 라벨
inputRef	`Ref<HTMLInputElement>`	-	input 요소의 ref (react-hook-form 등에서 사용)
className	`string`	-	추가 클래스명

`RadioGroup`

Prop	Type	Default	Description
children	`React.ReactNode`	필수	`Radio` 옵션 목록
name	`string`	-	그룹 이름
label	`string`	-	그룹 라벨(`Fieldset` 헤더)
value	`string`	-	현재 선택 값(Controlled)
defaultValue	`string`	-	기본 선택 값(Uncontrolled)
onValueChange	`(value: string) => void`	-	선택 값 변경 콜백
onChange	`(e: ChangeEvent<HTMLInputElement>) => void`	-	라디오 선택 시 네이티브 형태의 synthetic change(호환용)
onBlur	`(e: FocusEvent<HTMLFieldSetElement>) => void`	-	그룹 루트 기준 blur(첫 번째 `Radio`에서 포커스 이탈 시 전달)
disabled	`boolean`	`false`	그룹 비활성화
color	`'primary' \| 'positive' \| 'cautionary' \| 'destructive' \| 'info'`	`'primary'`	개별 옵션에 `color`가 없을 때 기본 색상
className	`string`	-	옵션 컨테이너(`flex` 영역)에 적용할 클래스
gap	`'sm' \| 'md' \| 'lg' \| number`	`'md'`	옵션 간 간격(`number`는 `0.25rem` 단위 배수)
orientation	`'vertical' \| 'horizontal'`	`'vertical'`	레이아웃 방향
required	`boolean`	-	필수(라벨에 표시)
description	`string`	-	도움말 텍스트(에러가 없을 때 하단)
errorMessage	`string`	-	에러 메시지(하단)

Radio

기본 사용법

Sizes

Group

React Hook Form

Props

Radio

RadioGroup

Radio

On this page