Radio group

Playground

'use client';
import { useState } from 'react';
import { RadioGroup, RadioGroupItem } from '@mbsw/ui';

export default function Demo() {
  const settings = {
    "mode": "vertical",
    "disabled": false
  };
  const [value, setValue] = useState('0');
  const items = ['A', 'B', 'C'];
  return (
    <RadioGroup
      orientation={settings.mode as 'vertical' | 'horizontal'}
      style={{
        display: 'flex',
        flexDirection: settings.mode === 'horizontal' ? 'row' : 'column',
      }}
      value={value}
      onValueChange={setValue}
      disabled={settings.disabled}
      aria-label={"옵션 선택"}
    >
      {items.map((label, index) => (
        <label
          key={index}
          style={{ display: 'flex', gap: 10, alignItems: 'center', margin: 12 }}
        >
          <RadioGroupItem value={String(index)} />
          {label}
        </label>
      ))}
    </RadioGroup>
  );
}

Properties

Orientation

Disabled

Usage

여러 항목 중 하나만 선택할 때 사용합니다. 각 RadioGroupItem에 고유한 value를 전달합니다.

'use client';
import { RadioGroup, RadioGroupItem } from '@mbsw/ui';

export default function Example() {
  return (
    <RadioGroup defaultValue="0" aria-label={"옵션 선택"}>
      <label>
        <RadioGroupItem value="0" /> A
      </label>
      <label>
        <RadioGroupItem value="1" /> B
      </label>
    </RadioGroup>
  );
}

Playground의 Code 탭에서 현재 설정과 동작이 포함된 예제 전체를 복사할 수 있습니다. 공통 CSS 설치는 설치하기를 확인하세요.

Composition

RadioGroupRadioGroupItem