RadioCard

Data Input

카드 형태로 하나만 선택하는 라디오.

Usage

제목·설명 등 정보가 많은 배타 선택지를 카드 형태로 제공할 때 사용한다.

import

import { RadioCard } from '@mildang/design-system/RadioCard';

예제를 복사해 쓸 때 필요한 준비

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

API Reference

RadioCard Props

Prop

Type

Default

value

필수

string

지정 안 함

aria-label

string

지정 안 함

className

string

지정 안 함

description

ReactNode

지정 안 함

disabled

boolean

false

label

ReactNode

지정 안 함

panda

SystemStyleObject

지정 안 함

size

"sm" | "md"

예제

기본 사용

요금제처럼 값을 비교해 고르는 선택지를 카드로 나란히 둡니다.

코드

Open in Playground

import type { ComponentProps } from 'react';
import { RadioGroup, RadioCard } from '@mildang/design-system/Radio';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    value: 'opt1',
    size: 'md',
    disabled: false,
    label: 'Label',
    description: 'Description',
  }) } as ComponentProps<typeof RadioCard>;

const RadioCardDefaultExampleRender = (args: ComponentProps<typeof RadioCard>) => (
    <RadioGroup defaultValue="opt1" aria-label="RadioCard" alignItems="flex-start">
      <RadioCard
        value="opt1"
        size={args.size}
        disabled={args.disabled}
        label={args.label}
        description={args.description}
        aria-label={!args.label ? 'Option' : undefined}
      />
    </RadioGroup>
  );

export default function RadioCardDefaultExample(props: Partial<ComponentProps<typeof RadioCard>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof RadioCard>;
  return RadioCardDefaultExampleRender(mergedProps);
}

개별 옵션 비활성

정원이 찬 카드만 disabled 로 잠그고 사유를 설명 자리에 적습니다.

코드

Open in Playground

import { css } from '@mildang/styled-system/css';
import { RadioGroup, RadioCard } from '@mildang/design-system/Radio';

// 모든 상태(inactive/hover/active/disabled/active-disabled)를 한 화면에 나열 — 문서 States 섹션 + 스냅샷용
const stateCell = css({ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12 });

const stateCaption = css({ textStyle: 'caption-md-medium', color: 'neutral.text.base' });

const RadioCardAllStatesExample = () => (
    <div
      id="radiocard-states"
      className={css({
        display: 'flex',
        gap: 24,
        flexWrap: 'wrap',
        alignItems: 'flex-start',
        padding: '8px',
      })}
    >
      <div className={stateCell}>
        <RadioGroup value="__none__" aria-label="Inactive state">
          <RadioCard value="a" label="Label" description="Description" />
        </RadioGroup>
        <span className={stateCaption}>Inactive</span>
      </div>
      <div className={stateCell}>
        <RadioGroup aria-label="Hover state">
          <RadioCard value="a" label="Label" description="Description" className="state-hover" />
        </RadioGroup>
        <span className={stateCaption}>Hover</span>
      </div>
      <div className={stateCell}>
        <RadioGroup value="a" aria-label="Active state">
          <RadioCard value="a" label="Label" description="Description" />
        </RadioGroup>
        <span className={stateCaption}>Active</span>
      </div>
      <div className={stateCell}>
        <RadioGroup value="__none__" aria-label="Disabled state">
          <RadioCard value="a" label="Label" description="Description" disabled />
        </RadioGroup>
        <span className={stateCaption}>Disabled</span>
      </div>
      <div className={stateCell}>
        <RadioGroup value="a" aria-label="Active disabled state">
          <RadioCard value="a" label="Label" description="Description" disabled />
        </RadioGroup>
        <span className={stateCaption}>Active Disabled</span>
      </div>
    </div>
  );

export default RadioCardAllStatesExample;

Full width

코드

Open in Playground

import { css } from '@mildang/styled-system/css';
import { RadioGroup, RadioCard } from '@mildang/design-system/Radio';

const RadioCardFullWidthExample = () => (
    <div className={css({ display: 'flex', flexDirection: 'column', gap: 24 })}>
      {[280, 400, 560].map((w) => (
        <div key={w} style={{ width: w }}>
          <RadioGroup defaultValue="opt1" aria-label={`RadioCard ${w}px`} gap="12">
            <RadioCard value="opt1" label="Label" description="Description" />
            <RadioCard value="opt2" label="Label" description="Description" />
          </RadioGroup>
        </div>
      ))}
    </div>
  );

export default RadioCardFullWidthExample;

Group

코드

Open in Playground

import type { ComponentProps } from 'react';
import { RadioGroup, RadioCard } from '@mildang/design-system/Radio';

const STORY_DEFAULT_ARGS = { ...({}), ...({ value: 'opt1', size: 'md' }) } as ComponentProps<typeof RadioCard>;

const RadioCardGroupExampleRender = (args: ComponentProps<typeof RadioCard>) => (
    <RadioGroup
      defaultValue="opt1"
      aria-label="RadioCard group"
      display="flex"
      flexDirection="column"
      gap="16"
      alignItems="stretch"
      width={240}
    >
      <RadioCard value="opt1" size={args.size} label="Label" description="Description" />
      <RadioCard value="opt2" size={args.size} label="Label" description="Description" />
      <RadioCard value="opt3" size={args.size} label="Label" description="Description" />
    </RadioGroup>
  );

export default function RadioCardGroupExample(props: Partial<ComponentProps<typeof RadioCard>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof RadioCard>;
  return RadioCardGroupExampleRender(mergedProps);
}