ButtonRadioGroup

Data Input

버튼 형태로 하나만 선택하는 라디오 그룹.

Usage

배타 선택지를 버튼 모양으로 나란히 제공하고 선택 결과를 즉시 강조할 때 사용한다.

import

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

API Reference

ButtonRadioGroup Props

Prop

Type

Default

name

필수

string

지정 안 함

options

필수

{ value: string; label: string; }[]

지정 안 함

defaultValue

string

disabled

boolean

false

gridTemplateColumns

string

지정 안 함

gridTemplateRows

string

지정 안 함

onChange

(value: string) => void

지정 안 함

orientation

"horizontal" | "vertical"

vertical

value

string

지정 안 함

같은 패밀리

@mildang/design-system/Radio 에서 같이 내보내는 컴포넌트다.

Radio

하나의 선택지를 나타내는 라디오.

RadioGroup

여러 라디오를 묶어 하나만 선택하게 하는 그룹.

예제

Default

코드

Open in Playground

import type { ComponentProps } from 'react';

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

const STORY_DEFAULT_ARGS = { ...({}), ...({
    name: 'radio-button-group',
    options: [
      { value: 'option1', label: '옵션 1' },
      { value: 'option2', label: '옵션 2' },
      { value: 'option3', label: '옵션 3' },
    ],
    defaultValue: 'option1',
    orientation: 'horizontal',
  }) } as ComponentProps<typeof ButtonRadioGroup>;

const ButtonRadioGroupDefaultExampleRender = (args: ComponentProps<typeof ButtonRadioGroup>) => <ButtonRadioGroup {...args} />;

export default function ButtonRadioGroupDefaultExample(props: Partial<ComponentProps<typeof ButtonRadioGroup>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof ButtonRadioGroup>;
  return ButtonRadioGroupDefaultExampleRender(mergedProps);
}

WithDefaultValue

코드

Open in Playground

import type { ComponentProps } from 'react';

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

const STORY_DEFAULT_ARGS = { ...({}), ...({
    name: 'radio-button-default',
    options: [
      { value: 'opt1', label: '옵션 1' },
      { value: 'opt2', label: '옵션 2' },
      { value: 'opt3', label: '옵션 3' },
    ],
    defaultValue: 'opt2',
  }) } as ComponentProps<typeof ButtonRadioGroup>;

const ButtonRadioGroupWithDefaultValueExampleRender = (args: ComponentProps<typeof ButtonRadioGroup>) => <ButtonRadioGroup {...args} />;

export default function ButtonRadioGroupWithDefaultValueExample(props: Partial<ComponentProps<typeof ButtonRadioGroup>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof ButtonRadioGroup>;
  return ButtonRadioGroupWithDefaultValueExampleRender(mergedProps);
}

FlexDirectionColumn

코드

Open in Playground

import type { ComponentProps } from 'react';

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

const STORY_DEFAULT_ARGS = { ...({}), ...({
    name: 'radio-button-column',
    options: [
      { value: 'option1', label: '옵션 1' },
      { value: 'option2', label: '옵션 2' },
      { value: 'option3', label: '옵션 3' },
    ],
    defaultValue: 'option1',
    orientation: 'vertical',
  }) } as ComponentProps<typeof ButtonRadioGroup>;

const ButtonRadioGroupFlexDirectionColumnExampleRender = (args: ComponentProps<typeof ButtonRadioGroup>) => <ButtonRadioGroup {...args} />;

export default function ButtonRadioGroupFlexDirectionColumnExample(props: Partial<ComponentProps<typeof ButtonRadioGroup>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof ButtonRadioGroup>;
  return ButtonRadioGroupFlexDirectionColumnExampleRender(mergedProps);
}

FlexDirectionRow

코드

Open in Playground

import type { ComponentProps } from 'react';

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

const STORY_DEFAULT_ARGS = { ...({}), ...({
    name: 'radio-button-row',
    options: [
      { value: 'option1', label: '옵션 1' },
      { value: 'option2', label: '옵션 2' },
      { value: 'option3', label: '옵션 3' },
    ],
    defaultValue: 'option1',
    orientation: 'horizontal',
  }) } as ComponentProps<typeof ButtonRadioGroup>;

const ButtonRadioGroupFlexDirectionRowExampleRender = (args: ComponentProps<typeof ButtonRadioGroup>) => <ButtonRadioGroup {...args} />;

export default function ButtonRadioGroupFlexDirectionRowExample(props: Partial<ComponentProps<typeof ButtonRadioGroup>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof ButtonRadioGroup>;
  return ButtonRadioGroupFlexDirectionRowExampleRender(mergedProps);
}

Grid2x2

코드

Open in Playground

import type { ComponentProps } from 'react';

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

const STORY_DEFAULT_ARGS = { ...({}), ...({
    name: 'radio-button-grid-2x2',
    options: [
      { value: 'option1', label: '옵션 1' },
      { value: 'option2', label: '옵션 2' },
      { value: 'option3', label: '옵션 3' },
      { value: 'option4', label: '옵션 4' },
    ],
    defaultValue: 'option1',
    gridTemplateColumns: '1fr 1fr',
    gridTemplateRows: '1fr 1fr',
  }) } as ComponentProps<typeof ButtonRadioGroup>;

const ButtonRadioGroupGrid2x2ExampleRender = (args: ComponentProps<typeof ButtonRadioGroup>) => <ButtonRadioGroup {...args} />;

export default function ButtonRadioGroupGrid2x2Example(props: Partial<ComponentProps<typeof ButtonRadioGroup>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof ButtonRadioGroup>;
  return ButtonRadioGroupGrid2x2ExampleRender(mergedProps);
}