Radio Group

여러 옵션 중 하나를 선택하는 라디오 버튼 그룹

Basic Usage

기본적인 라디오 그룹 예시입니다.

Option One

Option Two

Option Three

tsx

<RadioGroup defaultValue="option-one">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-one" id="option-one" />
    <Label htmlFor="option-one">Option One</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-two" id="option-two" />
    <Label htmlFor="option-two">Option Two</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-three" id="option-three" />
    <Label htmlFor="option-three">Option Three</Label>
  </div>
</RadioGroup>

Disabled State

비활성화된 라디오 버튼 예시입니다.

Enabled

Disabled

tsx

<RadioGroup defaultValue="enabled">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="enabled" id="enabled" />
    <Label htmlFor="enabled">Enabled</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="disabled" id="disabled" disabled />
    <Label htmlFor="disabled">Disabled</Label>
  </div>
</RadioGroup>

Usage

tsx

import { RadioGroup, RadioGroupItem } from '@gpters-internal/ui';
import { Label } from '@gpters-internal/ui';

function Example() {
  return (
    <RadioGroup defaultValue="option-one" onValueChange={(value) => console.log(value)}>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="option-one" id="r1" />
        <Label htmlFor="r1">Option One</Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="option-two" id="r2" />
        <Label htmlFor="r2">Option Two</Label>
      </div>
    </RadioGroup>
  );
}