Radio Group

여러 옵션 중 하나를 선택할 수 있도록 할 때 사용하는 컴포넌트예요.

일반 배송특급 배송직접 수령

설치

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/radio-group.json

pnpm dlx shadcn@latest add https://rebar.conmarket-landing.workers.dev/r/radio-group.json

radix-ui, class-variance-authority 를 설치하고 아래 코드를 components/ui/radio-group.tsx 에 복사해요.

components/ui/radio-group.tsx

/** * @title Radio Group * @description 여러 옵션 중 하나를 선택할 수 있도록 할 때 사용하는 컴포넌트예요. */'use client';import * as React from 'react';import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';import { cva, type VariantProps } from 'class-variance-authority';import { cn } from '@/lib/utils';// SEED Rootage spec: radiomark.yaml// 눌림(engaged)은 Radiomark 자체가 눌렸을 때(active)와 감싸는 라벨이 눌렸을 때(group-active/radio) 모두 적용해요.const radiomarkVariants = cva(  [    'group/radiomark relative box-border flex flex-none cursor-pointer items-center justify-center rounded-full',    'border border-solid border-stroke-neutral-weak bg-bg-transparent',    'transition-[background-color,scale,outline-color] duration-(--rb-duration-color-transition) ease-easing',    'outline-2 outline-offset-2 outline-transparent focus-visible:outline-stroke-focus-ring',    'enabled:active:scale-[0.95] group-active/radio:enabled:scale-[0.95]',    'enabled:active:bg-bg-transparent-pressed group-active/radio:enabled:bg-bg-transparent-pressed',    'data-[state=checked]:border-0',    // 비활성 (SEED 는 tone 과 상관없이 brand 값을 써요)    'disabled:cursor-not-allowed disabled:bg-palette-gray-300',    'disabled:data-[state=checked]:border disabled:data-[state=checked]:border-palette-gray-300 disabled:data-[state=checked]:bg-bg-transparent disabled:data-[state=checked]:text-palette-gray-300',  ],  {    variants: {      tone: {        brand: [          'enabled:data-[state=checked]:bg-bg-brand-solid enabled:data-[state=checked]:text-fg-on-brand-solid',          'enabled:data-[state=checked]:active:bg-bg-brand-solid-pressed group-active/radio:enabled:data-[state=checked]:bg-bg-brand-solid-pressed',        ],        neutral: [          'enabled:data-[state=checked]:bg-bg-neutral-solid enabled:data-[state=checked]:text-fg-on-neutral-solid',          'enabled:data-[state=checked]:active:bg-bg-neutral-solid-pressed group-active/radio:enabled:data-[state=checked]:bg-bg-neutral-solid-pressed',        ],      },      size: {        medium: 'size-x5',        large: 'size-x6',      },    },    defaultVariants: {      tone: 'brand',      size: 'medium',    },  },);// 안쪽 점: medium 8px(비활성 10px), large 10px(비활성 12px)const radiomarkIconSize = {  medium: 'size-x2 group-disabled/radiomark:size-x2_5',  large: 'size-x2_5 group-disabled/radiomark:size-x3',} as const;// SEED Rootage spec: radio.yamlconst radioVariants = cva(  [    'group/radio relative isolate inline-flex max-w-full cursor-pointer items-start gap-x2 align-top',    'has-[button:disabled]:cursor-not-allowed',  ],  {    variants: {      size: {        medium: 'min-h-x8',        large: 'min-h-x9',      },    },    defaultVariants: { size: 'medium' },  },);const radioLabelVariants = cva('text-fg-neutral group-has-[button:disabled]/radio:text-fg-disabled', {  variants: {    size: {      // 수직 위치 보정: (root 최소 높이 - 행간) / 2      medium: 'mt-[calc(var(--rb-dimension-x8)/2_-_var(--rb-line-height-t4)/2)] text-t4',      large: 'mt-[calc(var(--rb-dimension-x9)/2_-_var(--rb-line-height-t5)/2)] text-t5',    },    weight: {      regular: 'font-regular',      bold: 'font-bold',    },  },  defaultVariants: { size: 'medium', weight: 'regular' },});// 수직 위치 보정: (root 최소 높이 - Radiomark 크기) / 2const radiomarkOffset = {  medium: 'mt-[calc((var(--rb-dimension-x8)_-_var(--rb-dimension-x5))/2)]',  large: 'mt-[calc((var(--rb-dimension-x9)_-_var(--rb-dimension-x6))/2)]',} as const;type RadiomarkVariantProps = VariantProps<typeof radiomarkVariants>;export interface RadiomarkProps  extends React.ComponentProps<typeof RadioGroupPrimitive.Item>,    RadiomarkVariantProps {}/** 라벨 없이 쓰는 라디오 표시예요. RadioGroup 안에서 List 같은 다른 요소와 조합할 때 사용해요. */function Radiomark({ className, tone, size, ...props }: RadiomarkProps) {  return (    <RadioGroupPrimitive.Item      data-slot="radiomark"      className={cn(radiomarkVariants({ tone, size }), className)}      {...props}    >      <RadioGroupPrimitive.Indicator        data-slot="radiomark-icon"        className={cn('pointer-events-none block rounded-full bg-current', radiomarkIconSize[size ?? 'medium'])}      />    </RadioGroupPrimitive.Item>  );}type RadioGroupContextValue = {  tone?: RadiomarkVariantProps['tone'];  size?: 'medium' | 'large';  weight?: 'regular' | 'bold';};const RadioGroupContext = React.createContext<RadioGroupContextValue>({});export interface RadioGroupProps  extends React.ComponentProps<typeof RadioGroupPrimitive.Root>,    RadioGroupContextValue {}/** 라디오 항목을 묶어요. tone/size/weight 를 지정하면 안쪽 RadioGroupItem 의 기본값이 돼요. */function RadioGroup({ className, tone, size, weight, ...props }: RadioGroupProps) {  const value = React.useMemo(() => ({ tone, size, weight }), [tone, size, weight]);  return (    <RadioGroupContext.Provider value={value}>      <RadioGroupPrimitive.Root        data-slot="radio-group"        className={cn('flex flex-col gap-x1', className)}        {...props}      />    </RadioGroupContext.Provider>  );}export interface RadioGroupItemProps extends RadiomarkProps {  /** 라디오 표시 옆에 보여줄 라벨이에요. 라벨을 누르면 항목이 선택돼요. */  label?: React.ReactNode;  /** 라벨 굵기예요. */  weight?: 'regular' | 'bold';  /** 바깥 label 요소에 줄 className 이에요. */  rootClassName?: string;  rootRef?: React.Ref<HTMLLabelElement>;}function RadioGroupItem({  label,  weight,  tone,  size,  className,  rootClassName,  rootRef,  ...props}: RadioGroupItemProps) {  const group = React.useContext(RadioGroupContext);  const resolved = {    tone: tone ?? group.tone ?? 'brand',    size: size ?? group.size ?? 'medium',    weight: weight ?? group.weight ?? 'regular',  };  if (label == null) {    return <Radiomark tone={resolved.tone} size={resolved.size} className={className} {...props} />;  }  return (    <label ref={rootRef} data-slot="radio-group-item" className={cn(radioVariants({ size: resolved.size }), rootClassName)}>      <Radiomark        tone={resolved.tone}        size={resolved.size}        className={cn(radiomarkOffset[resolved.size], className)}        {...props}      />      <span data-slot="radio-group-item-label" className={radioLabelVariants({ size: resolved.size, weight: resolved.weight })}>        {label}      </span>    </label>  );}export { RadioGroup, RadioGroupItem, Radiomark, radioVariants, radiomarkVariants };

Anatomy

Radio는 Radiomark와 Label로 구성돼요. Radiomark는 개별 컴포넌트(Radiomark)로 제공되어서 자유롭게 조합해서 사용할 수 있어요. 여러 Radio는 RadioGroup 으로 묶고, 그 안에서 하나만 선택돼요.

요소	컴포넌트	설명
Group	`RadioGroup`	선택지를 묶고 선택된 값을 관리해요.
Root	`RadioGroupItem` (`label`)	Label을 포함한 전체 영역이 누르는 영역이에요.
Radiomark	`Radiomark`	선택 상태를 보여주는 원형 표시예요. 눌리면 살짝 줄어들어요.
Label	`label` prop	Radiomark 옆에 보여주는 텍스트예요.

Properties

Size, Weight

Radio는 Medium, Large 사이즈로 제공돼요. 강조해야 하는 경우 등에 따라서 Weight(Regular, Bold)를 조정해서 활용할 수 있어요. RadioGroup 에 지정하면 안쪽 항목의 기본값이 돼요.

Medium RegularMedium Bold

Large RegularLarge Bold

Tone

Radio는 Brand, Neutral 두 가지 Tone을 가져요. 디자인 가이드에서는 Neutral을 기본으로 사용하는 것을 권장해요.

Brand 선택Brand 미선택

Neutral 선택Neutral 미선택

State

Radio는 선택(Selected), 미선택(Unselected) 상태를 가지며, 각각의 상태는 사용자의 상호작용에 따라 활성화(Enabled), 비활성화(Disabled), 눌림(Pressed) 상태로 조합되어 표현돼요.

선택미선택

선택 (비활성)미선택 (비활성)

Long Label

라벨이 길어지면 여러 줄로 줄바꿈되고, Radiomark는 첫 줄에 맞춰 정렬돼요.

안전결제로 거래할게요. 물품을 받은 뒤 구매 확정을 하면 판매자에게 대금이 전달돼요.직거래로 만나서 결제할게요.

Radiomark

Radiomark 는 라벨 없이 쓰는 라디오 표시예요. RadioGroup 안에서 List처럼 다른 요소와 조합할 때 사용해요.

최신순낮은 가격순높은 가격순

Guidelines

Radio touch target

Radio는 Label을 포함한 영역이 Target으로 동작해요. List처럼 Radiomark를 조합해서 사용하는 경우 전체 Row가 Target 영역이 되어야 해요.

하나만 선택 가능할 때 사용하기

목록에서 하나의 옵션만 선택할 수 있는 경우 Radio를 사용해요.

일반 배송특급 배송

Do· 단일 선택

N개 중 1개만 고르는 경우 Radio를 사용해요.

채팅 알림키워드 알림

Don't· 다중 선택에 Radio

목록에서 여러 옵션을 선택할 수 있는 경우 Checkbox를 사용해요.

기본 선택 제공하기

Radio를 제공할 때는 사용자의 고민을 덜어주고 빠른 선택을 돕기 위해 가장 일반적인 선택지를 기본으로 제공하는 것을 권장해요. 권장되거나 빈번하게 사용되는 옵션을 기본으로 제공해요.

일반 배송특급 배송

Do· 기본 선택 제공

가장 일반적인 선택지를 미리 선택해 둬요.

일반 배송특급 배송

Don't· 아무것도 선택되지 않음

기본 선택이 없으면 사용자가 매번 고민해야 해요.

가로로 나열하지 않기

여러 Radio를 사용할 때는 수직으로 쌓아 올리는 것이 기본적인 정렬 방식이에요. 가로로 나열하면 레이블이 길어지거나 화면 너비가 좁아질 때 어떤 버튼에 해당하는지 혼동을 일으킬 수 있으므로 지양해요.

수평으로 배열해야 할 경우, 각 요소가 명확히 구분되도록 충분한 간격(Gap)을 확보해요.

새 상품사용감 적음사용감 많음

Do· 세로로 나열

선택지를 세로로 쌓아 올려요.

새 상품사용감 적음사용감 많음

Don't· 좁은 간격으로 가로 나열

간격이 좁으면 라벨이 어느 버튼에 속하는지 헷갈려요.

옵션 개수에 따라 적절한 컴포넌트 사용하기

사용자에게 명확하고 효율적인 선택 경험을 제공하기 위해, 선택해야 할 옵션의 개수는 컴포넌트를 결정하는 중요한 기준이 돼요.

Radio Group

선택지가 2개에서 6개 사이일 때 사용해요.

사용자가 각 옵션의 차이를 명확히 비교하고 신중하게 선택해야 할 때 (예: 배송 방법 - 일반 배송 vs. 특급 배송)
설정, 주문서, 설문조사 등 '서류' 형태의 폼일 때

Input Button

선택지가 6개 이상으로 많거나, 앞으로 더 늘어날 가능성이 있을 때 사용해요.

평소에는 선택된 값만 보여줘서 화면의 공간 효율성을 높이고 UI를 간결하게 유지해요. 버튼을 누르면 Bottom Sheet가 올라와 전체 옵션 목록을 보여주므로, 많은 수의 옵션도 효과적으로 처리할 수 있어요.
사용자가 이미 어떤 것을 선택할지 예측하고 있을 때
화면이 복잡하거나 다른 중요한 정보가 많을 때
출생연도, 국가 등 많은 옵션이 나타나고, 옵션이 추가될 수 있을 때

Radio vs. Checkbox vs. Chip Group

Radio와 Checkbox, Chip Group의 선택 기준은 다음과 같아요.

	Radio	Checkbox	Chip Group
핵심 규칙	단일 선택 (N개 중 1개) / 문장 등 긴 내용 표시 가능	다중 선택 (N개 중 N개) / 문장 등 긴 내용 표시 가능	둘 다 가능 (단일 또는 다중 선택) / 단어처럼 짧은 내용 표시 가능
주요 목적	폼(Form) 데이터의 선택 및 제출	여러 항목의 포함/제외 및 동의	콘텐츠의 필터링 또는 속성 부여
레이아웃	수직으로 쌓이며 좀 더 명료하게 행동을 유도할 수 있음	수직으로 쌓이며 좀 더 명료하게 행동을 유도할 수 있음	수평으로 쌓이며 컴팩트하게 화면을 구성할 수 있음
사용자의 인식	하나의 정답/답변을 고른다	해당되는 것에 모두 체크한다	특징을 고르거나 분류한다
최적 옵션 개수	2-6개	제한 없음 (권장: 2-10개)	제한 없음 (권장: 2-10개)
대표 사용 예시	배송 방법 선택, 만족도 조사 등	이용약관 동의, 수신 항목 선택 등	사이즈/색상 선택, 관심사 태그, 검색 필터 등

채팅 알림키워드 알림

Do· 여러 개를 고를 땐 Checkbox

해당되는 항목을 모두 고르는 경우 Checkbox를 사용해요.

최신순낮은 가격순

Do· 하나만 고를 땐 Radio

하나의 답을 고르는 경우 Radio를 사용해요.

Quantity Picker

버튼으로 수치 값을 한 단계씩 늘리거나 줄일 수 있는 입력 컴포넌트예요.

Reaction Button

사용자가 콘텐츠에 대한 반응을 표현할 수 있게 해주는 컴포넌트예요. 좋아요, 도움돼요 같은 감정적 피드백을 간편하게 남길 때 사용해요.

components/ui/radio-group.tsx

/**
 * @title Radio Group
 * @description 여러 옵션 중 하나를 선택할 수 있도록 할 때 사용하는 컴포넌트예요.
 */
'use client';

import * as React from 'react';
import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
import { cva, type VariantProps } from 'class-variance-authority';

import { cn } from '@/lib/utils';

// SEED Rootage spec: radiomark.yaml
// 눌림(engaged)은 Radiomark 자체가 눌렸을 때(active)와 감싸는 라벨이 눌렸을 때(group-active/radio) 모두 적용해요.
const radiomarkVariants = cva(
  [
    'group/radiomark relative box-border flex flex-none cursor-pointer items-center justify-center rounded-full',
    'border border-solid border-stroke-neutral-weak bg-bg-transparent',
    'transition-[background-color,scale,outline-color] duration-(--rb-duration-color-transition) ease-easing',
    'outline-2 outline-offset-2 outline-transparent focus-visible:outline-stroke-focus-ring',
    'enabled:active:scale-[0.95] group-active/radio:enabled:scale-[0.95]',
    'enabled:active:bg-bg-transparent-pressed group-active/radio:enabled:bg-bg-transparent-pressed',
    'data-[state=checked]:border-0',
    // 비활성 (SEED 는 tone 과 상관없이 brand 값을 써요)
    'disabled:cursor-not-allowed disabled:bg-palette-gray-300',
    'disabled:data-[state=checked]:border disabled:data-[state=checked]:border-palette-gray-300 disabled:data-[state=checked]:bg-bg-transparent disabled:data-[state=checked]:text-palette-gray-300',
  ],
  {
    variants: {
      tone: {
        brand: [
          'enabled:data-[state=checked]:bg-bg-brand-solid enabled:data-[state=checked]:text-fg-on-brand-solid',
          'enabled:data-[state=checked]:active:bg-bg-brand-solid-pressed group-active/radio:enabled:data-[state=checked]:bg-bg-brand-solid-pressed',
        ],
        neutral: [
          'enabled:data-[state=checked]:bg-bg-neutral-solid enabled:data-[state=checked]:text-fg-on-neutral-solid',
          'enabled:data-[state=checked]:active:bg-bg-neutral-solid-pressed group-active/radio:enabled:data-[state=checked]:bg-bg-neutral-solid-pressed',
        ],
      },
      size: {
        medium: 'size-x5',
        large: 'size-x6',
      },
    },
    defaultVariants: {
      tone: 'brand',
      size: 'medium',
    },
  },
);

// 안쪽 점: medium 8px(비활성 10px), large 10px(비활성 12px)
const radiomarkIconSize = {
  medium: 'size-x2 group-disabled/radiomark:size-x2_5',
  large: 'size-x2_5 group-disabled/radiomark:size-x3',
} as const;

// SEED Rootage spec: radio.yaml
const radioVariants = cva(
  [
    'group/radio relative isolate inline-flex max-w-full cursor-pointer items-start gap-x2 align-top',
    'has-[button:disabled]:cursor-not-allowed',
  ],
  {
    variants: {
      size: {
        medium: 'min-h-x8',
        large: 'min-h-x9',
      },
    },
    defaultVariants: { size: 'medium' },
  },
);

const radioLabelVariants = cva('text-fg-neutral group-has-[button:disabled]/radio:text-fg-disabled', {
  variants: {
    size: {
      // 수직 위치 보정: (root 최소 높이 - 행간) / 2
      medium: 'mt-[calc(var(--rb-dimension-x8)/2_-_var(--rb-line-height-t4)/2)] text-t4',
      large: 'mt-[calc(var(--rb-dimension-x9)/2_-_var(--rb-line-height-t5)/2)] text-t5',
    },
    weight: {
      regular: 'font-regular',
      bold: 'font-bold',
    },
  },
  defaultVariants: { size: 'medium', weight: 'regular' },
});

// 수직 위치 보정: (root 최소 높이 - Radiomark 크기) / 2
const radiomarkOffset = {
  medium: 'mt-[calc((var(--rb-dimension-x8)_-_var(--rb-dimension-x5))/2)]',
  large: 'mt-[calc((var(--rb-dimension-x9)_-_var(--rb-dimension-x6))/2)]',
} as const;

type RadiomarkVariantProps = VariantProps<typeof radiomarkVariants>;

export interface RadiomarkProps
  extends React.ComponentProps<typeof RadioGroupPrimitive.Item>,
    RadiomarkVariantProps {}

/** 라벨 없이 쓰는 라디오 표시예요. RadioGroup 안에서 List 같은 다른 요소와 조합할 때 사용해요. */
function Radiomark({ className, tone, size, ...props }: RadiomarkProps) {
  return (
    <RadioGroupPrimitive.Item
      data-slot="radiomark"
      className={cn(radiomarkVariants({ tone, size }), className)}
      {...props}
    >
      <RadioGroupPrimitive.Indicator
        data-slot="radiomark-icon"
        className={cn('pointer-events-none block rounded-full bg-current', radiomarkIconSize[size ?? 'medium'])}
      />
    </RadioGroupPrimitive.Item>
  );
}

type RadioGroupContextValue = {
  tone?: RadiomarkVariantProps['tone'];
  size?: 'medium' | 'large';
  weight?: 'regular' | 'bold';
};

const RadioGroupContext = React.createContext<RadioGroupContextValue>({});

export interface RadioGroupProps
  extends React.ComponentProps<typeof RadioGroupPrimitive.Root>,
    RadioGroupContextValue {}

/** 라디오 항목을 묶어요. tone/size/weight 를 지정하면 안쪽 RadioGroupItem 의 기본값이 돼요. */
function RadioGroup({ className, tone, size, weight, ...props }: RadioGroupProps) {
  const value = React.useMemo(() => ({ tone, size, weight }), [tone, size, weight]);

  return (
    <RadioGroupContext.Provider value={value}>
      <RadioGroupPrimitive.Root
        data-slot="radio-group"
        className={cn('flex flex-col gap-x1', className)}
        {...props}
      />
    </RadioGroupContext.Provider>
  );
}

export interface RadioGroupItemProps extends RadiomarkProps {
  /** 라디오 표시 옆에 보여줄 라벨이에요. 라벨을 누르면 항목이 선택돼요. */
  label?: React.ReactNode;
  /** 라벨 굵기예요. */
  weight?: 'regular' | 'bold';
  /** 바깥 label 요소에 줄 className 이에요. */
  rootClassName?: string;
  rootRef?: React.Ref<HTMLLabelElement>;
}

function RadioGroupItem({
  label,
  weight,
  tone,
  size,
  className,
  rootClassName,
  rootRef,
  ...props
}: RadioGroupItemProps) {
  const group = React.useContext(RadioGroupContext);
  const resolved = {
    tone: tone ?? group.tone ?? 'brand',
    size: size ?? group.size ?? 'medium',
    weight: weight ?? group.weight ?? 'regular',
  };

  if (label == null) {
    return <Radiomark tone={resolved.tone} size={resolved.size} className={className} {...props} />;
  }

  return (
    <label ref={rootRef} data-slot="radio-group-item" className={cn(radioVariants({ size: resolved.size }), rootClassName)}>
      <Radiomark
        tone={resolved.tone}
        size={resolved.size}
        className={cn(radiomarkOffset[resolved.size], className)}
        {...props}
      />
      <span data-slot="radio-group-item-label" className={radioLabelVariants({ size: resolved.size, weight: resolved.weight })}>
        {label}
      </span>
    </label>
  );
}

export { RadioGroup, RadioGroupItem, Radiomark, radioVariants, radiomarkVariants };

components/ui/radio-group.tsx

/** * @title Radio Group * @description 여러 옵션 중 하나를 선택할 수 있도록 할 때 사용하는 컴포넌트예요. */'use client';import * as React from 'react';import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';import { cva, type VariantProps } from 'class-variance-authority';import { cn } from '@/lib/utils';// SEED Rootage spec: radiomark.yaml// 눌림(engaged)은 Radiomark 자체가 눌렸을 때(active)와 감싸는 라벨이 눌렸을 때(group-active/radio) 모두 적용해요.const radiomarkVariants = cva(  [    'group/radiomark relative box-border flex flex-none cursor-pointer items-center justify-center rounded-full',    'border border-solid border-stroke-neutral-weak bg-bg-transparent',    'transition-[background-color,scale,outline-color] duration-(--rb-duration-color-transition) ease-easing',    'outline-2 outline-offset-2 outline-transparent focus-visible:outline-stroke-focus-ring',    'enabled:active:scale-[0.95] group-active/radio:enabled:scale-[0.95]',    'enabled:active:bg-bg-transparent-pressed group-active/radio:enabled:bg-bg-transparent-pressed',    'data-[state=checked]:border-0',    // 비활성 (SEED 는 tone 과 상관없이 brand 값을 써요)    'disabled:cursor-not-allowed disabled:bg-palette-gray-300',    'disabled:data-[state=checked]:border disabled:data-[state=checked]:border-palette-gray-300 disabled:data-[state=checked]:bg-bg-transparent disabled:data-[state=checked]:text-palette-gray-300',  ],  {    variants: {      tone: {        brand: [          'enabled:data-[state=checked]:bg-bg-brand-solid enabled:data-[state=checked]:text-fg-on-brand-solid',          'enabled:data-[state=checked]:active:bg-bg-brand-solid-pressed group-active/radio:enabled:data-[state=checked]:bg-bg-brand-solid-pressed',        ],        neutral: [          'enabled:data-[state=checked]:bg-bg-neutral-solid enabled:data-[state=checked]:text-fg-on-neutral-solid',          'enabled:data-[state=checked]:active:bg-bg-neutral-solid-pressed group-active/radio:enabled:data-[state=checked]:bg-bg-neutral-solid-pressed',        ],      },      size: {        medium: 'size-x5',        large: 'size-x6',      },    },    defaultVariants: {      tone: 'brand',      size: 'medium',    },  },);// 안쪽 점: medium 8px(비활성 10px), large 10px(비활성 12px)const radiomarkIconSize = {  medium: 'size-x2 group-disabled/radiomark:size-x2_5',  large: 'size-x2_5 group-disabled/radiomark:size-x3',} as const;// SEED Rootage spec: radio.yamlconst radioVariants = cva(  [    'group/radio relative isolate inline-flex max-w-full cursor-pointer items-start gap-x2 align-top',    'has-[button:disabled]:cursor-not-allowed',  ],  {    variants: {      size: {        medium: 'min-h-x8',        large: 'min-h-x9',      },    },    defaultVariants: { size: 'medium' },  },);const radioLabelVariants = cva('text-fg-neutral group-has-[button:disabled]/radio:text-fg-disabled', {  variants: {    size: {      // 수직 위치 보정: (root 최소 높이 - 행간) / 2      medium: 'mt-[calc(var(--rb-dimension-x8)/2_-_var(--rb-line-height-t4)/2)] text-t4',      large: 'mt-[calc(var(--rb-dimension-x9)/2_-_var(--rb-line-height-t5)/2)] text-t5',    },    weight: {      regular: 'font-regular',      bold: 'font-bold',    },  },  defaultVariants: { size: 'medium', weight: 'regular' },});// 수직 위치 보정: (root 최소 높이 - Radiomark 크기) / 2const radiomarkOffset = {  medium: 'mt-[calc((var(--rb-dimension-x8)_-_var(--rb-dimension-x5))/2)]',  large: 'mt-[calc((var(--rb-dimension-x9)_-_var(--rb-dimension-x6))/2)]',} as const;type RadiomarkVariantProps = VariantProps<typeof radiomarkVariants>;export interface RadiomarkProps  extends React.ComponentProps<typeof RadioGroupPrimitive.Item>,    RadiomarkVariantProps {}/** 라벨 없이 쓰는 라디오 표시예요. RadioGroup 안에서 List 같은 다른 요소와 조합할 때 사용해요. */function Radiomark({ className, tone, size, ...props }: RadiomarkProps) {  return (    <RadioGroupPrimitive.Item      data-slot="radiomark"      className={cn(radiomarkVariants({ tone, size }), className)}      {...props}    >      <RadioGroupPrimitive.Indicator        data-slot="radiomark-icon"        className={cn('pointer-events-none block rounded-full bg-current', radiomarkIconSize[size ?? 'medium'])}      />    </RadioGroupPrimitive.Item>  );}type RadioGroupContextValue = {  tone?: RadiomarkVariantProps['tone'];  size?: 'medium' | 'large';  weight?: 'regular' | 'bold';};const RadioGroupContext = React.createContext<RadioGroupContextValue>({});export interface RadioGroupProps  extends React.ComponentProps<typeof RadioGroupPrimitive.Root>,    RadioGroupContextValue {}/** 라디오 항목을 묶어요. tone/size/weight 를 지정하면 안쪽 RadioGroupItem 의 기본값이 돼요. */function RadioGroup({ className, tone, size, weight, ...props }: RadioGroupProps) {  const value = React.useMemo(() => ({ tone, size, weight }), [tone, size, weight]);  return (    <RadioGroupContext.Provider value={value}>      <RadioGroupPrimitive.Root        data-slot="radio-group"        className={cn('flex flex-col gap-x1', className)}        {...props}      />    </RadioGroupContext.Provider>  );}export interface RadioGroupItemProps extends RadiomarkProps {  /** 라디오 표시 옆에 보여줄 라벨이에요. 라벨을 누르면 항목이 선택돼요. */  label?: React.ReactNode;  /** 라벨 굵기예요. */  weight?: 'regular' | 'bold';  /** 바깥 label 요소에 줄 className 이에요. */  rootClassName?: string;  rootRef?: React.Ref<HTMLLabelElement>;}function RadioGroupItem({  label,  weight,  tone,  size,  className,  rootClassName,  rootRef,  ...props}: RadioGroupItemProps) {  const group = React.useContext(RadioGroupContext);  const resolved = {    tone: tone ?? group.tone ?? 'brand',    size: size ?? group.size ?? 'medium',    weight: weight ?? group.weight ?? 'regular',  };  if (label == null) {    return <Radiomark tone={resolved.tone} size={resolved.size} className={className} {...props} />;  }  return (    <label ref={rootRef} data-slot="radio-group-item" className={cn(radioVariants({ size: resolved.size }), rootClassName)}>      <Radiomark        tone={resolved.tone}        size={resolved.size}        className={cn(radiomarkOffset[resolved.size], className)}        {...props}      />      <span data-slot="radio-group-item-label" className={radioLabelVariants({ size: resolved.size, weight: resolved.weight })}>        {label}      </span>    </label>  );}export { RadioGroup, RadioGroupItem, Radiomark, radioVariants, radiomarkVariants };

components/ui/radio-group.tsx

/**
 * @title Radio Group
 * @description 여러 옵션 중 하나를 선택할 수 있도록 할 때 사용하는 컴포넌트예요.
 */
'use client';

import * as React from 'react';
import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
import { cva, type VariantProps } from 'class-variance-authority';

import { cn } from '@/lib/utils';

// SEED Rootage spec: radiomark.yaml
// 눌림(engaged)은 Radiomark 자체가 눌렸을 때(active)와 감싸는 라벨이 눌렸을 때(group-active/radio) 모두 적용해요.
const radiomarkVariants = cva(
  [
    'group/radiomark relative box-border flex flex-none cursor-pointer items-center justify-center rounded-full',
    'border border-solid border-stroke-neutral-weak bg-bg-transparent',
    'transition-[background-color,scale,outline-color] duration-(--rb-duration-color-transition) ease-easing',
    'outline-2 outline-offset-2 outline-transparent focus-visible:outline-stroke-focus-ring',
    'enabled:active:scale-[0.95] group-active/radio:enabled:scale-[0.95]',
    'enabled:active:bg-bg-transparent-pressed group-active/radio:enabled:bg-bg-transparent-pressed',
    'data-[state=checked]:border-0',
    // 비활성 (SEED 는 tone 과 상관없이 brand 값을 써요)
    'disabled:cursor-not-allowed disabled:bg-palette-gray-300',
    'disabled:data-[state=checked]:border disabled:data-[state=checked]:border-palette-gray-300 disabled:data-[state=checked]:bg-bg-transparent disabled:data-[state=checked]:text-palette-gray-300',
  ],
  {
    variants: {
      tone: {
        brand: [
          'enabled:data-[state=checked]:bg-bg-brand-solid enabled:data-[state=checked]:text-fg-on-brand-solid',
          'enabled:data-[state=checked]:active:bg-bg-brand-solid-pressed group-active/radio:enabled:data-[state=checked]:bg-bg-brand-solid-pressed',
        ],
        neutral: [
          'enabled:data-[state=checked]:bg-bg-neutral-solid enabled:data-[state=checked]:text-fg-on-neutral-solid',
          'enabled:data-[state=checked]:active:bg-bg-neutral-solid-pressed group-active/radio:enabled:data-[state=checked]:bg-bg-neutral-solid-pressed',
        ],
      },
      size: {
        medium: 'size-x5',
        large: 'size-x6',
      },
    },
    defaultVariants: {
      tone: 'brand',
      size: 'medium',
    },
  },
);

// 안쪽 점: medium 8px(비활성 10px), large 10px(비활성 12px)
const radiomarkIconSize = {
  medium: 'size-x2 group-disabled/radiomark:size-x2_5',
  large: 'size-x2_5 group-disabled/radiomark:size-x3',
} as const;

// SEED Rootage spec: radio.yaml
const radioVariants = cva(
  [
    'group/radio relative isolate inline-flex max-w-full cursor-pointer items-start gap-x2 align-top',
    'has-[button:disabled]:cursor-not-allowed',
  ],
  {
    variants: {
      size: {
        medium: 'min-h-x8',
        large: 'min-h-x9',
      },
    },
    defaultVariants: { size: 'medium' },
  },
);

const radioLabelVariants = cva('text-fg-neutral group-has-[button:disabled]/radio:text-fg-disabled', {
  variants: {
    size: {
      // 수직 위치 보정: (root 최소 높이 - 행간) / 2
      medium: 'mt-[calc(var(--rb-dimension-x8)/2_-_var(--rb-line-height-t4)/2)] text-t4',
      large: 'mt-[calc(var(--rb-dimension-x9)/2_-_var(--rb-line-height-t5)/2)] text-t5',
    },
    weight: {
      regular: 'font-regular',
      bold: 'font-bold',
    },
  },
  defaultVariants: { size: 'medium', weight: 'regular' },
});

// 수직 위치 보정: (root 최소 높이 - Radiomark 크기) / 2
const radiomarkOffset = {
  medium: 'mt-[calc((var(--rb-dimension-x8)_-_var(--rb-dimension-x5))/2)]',
  large: 'mt-[calc((var(--rb-dimension-x9)_-_var(--rb-dimension-x6))/2)]',
} as const;

type RadiomarkVariantProps = VariantProps<typeof radiomarkVariants>;

export interface RadiomarkProps
  extends React.ComponentProps<typeof RadioGroupPrimitive.Item>,
    RadiomarkVariantProps {}

/** 라벨 없이 쓰는 라디오 표시예요. RadioGroup 안에서 List 같은 다른 요소와 조합할 때 사용해요. */
function Radiomark({ className, tone, size, ...props }: RadiomarkProps) {
  return (
    <RadioGroupPrimitive.Item
      data-slot="radiomark"
      className={cn(radiomarkVariants({ tone, size }), className)}
      {...props}
    >
      <RadioGroupPrimitive.Indicator
        data-slot="radiomark-icon"
        className={cn('pointer-events-none block rounded-full bg-current', radiomarkIconSize[size ?? 'medium'])}
      />
    </RadioGroupPrimitive.Item>
  );
}

type RadioGroupContextValue = {
  tone?: RadiomarkVariantProps['tone'];
  size?: 'medium' | 'large';
  weight?: 'regular' | 'bold';
};

const RadioGroupContext = React.createContext<RadioGroupContextValue>({});

export interface RadioGroupProps
  extends React.ComponentProps<typeof RadioGroupPrimitive.Root>,
    RadioGroupContextValue {}

/** 라디오 항목을 묶어요. tone/size/weight 를 지정하면 안쪽 RadioGroupItem 의 기본값이 돼요. */
function RadioGroup({ className, tone, size, weight, ...props }: RadioGroupProps) {
  const value = React.useMemo(() => ({ tone, size, weight }), [tone, size, weight]);

  return (
    <RadioGroupContext.Provider value={value}>
      <RadioGroupPrimitive.Root
        data-slot="radio-group"
        className={cn('flex flex-col gap-x1', className)}
        {...props}
      />
    </RadioGroupContext.Provider>
  );
}

export interface RadioGroupItemProps extends RadiomarkProps {
  /** 라디오 표시 옆에 보여줄 라벨이에요. 라벨을 누르면 항목이 선택돼요. */
  label?: React.ReactNode;
  /** 라벨 굵기예요. */
  weight?: 'regular' | 'bold';
  /** 바깥 label 요소에 줄 className 이에요. */
  rootClassName?: string;
  rootRef?: React.Ref<HTMLLabelElement>;
}

function RadioGroupItem({
  label,
  weight,
  tone,
  size,
  className,
  rootClassName,
  rootRef,
  ...props
}: RadioGroupItemProps) {
  const group = React.useContext(RadioGroupContext);
  const resolved = {
    tone: tone ?? group.tone ?? 'brand',
    size: size ?? group.size ?? 'medium',
    weight: weight ?? group.weight ?? 'regular',
  };

  if (label == null) {
    return <Radiomark tone={resolved.tone} size={resolved.size} className={className} {...props} />;
  }

  return (
    <label ref={rootRef} data-slot="radio-group-item" className={cn(radioVariants({ size: resolved.size }), rootClassName)}>
      <Radiomark
        tone={resolved.tone}
        size={resolved.size}
        className={cn(radiomarkOffset[resolved.size], className)}
        {...props}
      />
      <span data-slot="radio-group-item-label" className={radioLabelVariants({ size: resolved.size, weight: resolved.weight })}>
        {label}
      </span>
    </label>
  );
}

export { RadioGroup, RadioGroupItem, Radiomark, radioVariants, radiomarkVariants };

Radio Group

설치Copy Anchor Link

수동 설치

AnatomyCopy Anchor Link

PropertiesCopy Anchor Link

Size, WeightCopy Anchor Link

ToneCopy Anchor Link

StateCopy Anchor Link

Long LabelCopy Anchor Link

RadiomarkCopy Anchor Link

GuidelinesCopy Anchor Link

Radio touch targetCopy Anchor Link

하나만 선택 가능할 때 사용하기Copy Anchor Link

기본 선택 제공하기Copy Anchor Link

가로로 나열하지 않기Copy Anchor Link

옵션 개수에 따라 적절한 컴포넌트 사용하기Copy Anchor Link

Radio GroupCopy Anchor Link

Input ButtonCopy Anchor Link

Radio vs. Checkbox vs. Chip GroupCopy Anchor Link

PropsCopy Anchor Link

RadioGroupCopy Anchor Link

RadioGroupItemCopy Anchor Link

RadiomarkCopy Anchor Link

On this page

설치

Anatomy

Properties

Size, Weight

Tone

State

Long Label

Radiomark

Guidelines

Radio touch target

하나만 선택 가능할 때 사용하기

기본 선택 제공하기

가로로 나열하지 않기

옵션 개수에 따라 적절한 컴포넌트 사용하기

Radio Group

Input Button

Radio vs. Checkbox vs. Chip Group

Props

RadioGroup

RadioGroupItem

Radiomark