1. RadioButtonBasic

RadioButtonBasic 컴포넌트는 사용자가 선택할 수 있는 라디오 버튼을 제공합니다. 다양한 크기와 색상을 지정할 수 있으며, 비활성화 옵션도 지원합니다.

1.1. Import

import RadioButtonBasic from '@components/RadioButton/RadioButtonBasic';

1.2. Usage

기본 사용 예제는 아래와 같습니다:

Option 1Option 2


import RadioButtonBasic from '@components/RadioButton/RadioButtonBasic';

function Example() {
  const [basicSelectedValue, setBasicSelectedValue] = useState("");

  const handleBasicChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setBasicSelectedValue(event.target.value);
  };

  return (
    <RadioButtonBasic
      name="basicOptions"
      value="option1"
      checked={basicSelectedValue === "option1"}
      onChange={handleBasicChange}
      label="Option 1"
      size="medium"
      color="blue"
    />
  );
}

export default Example;

1.3. Changing the Size of the Radio Button

RadioButtonBasic 컴포넌트는 다양한 크기로 제공됩니다. 기본 크기는 medium입니다:

small: 작은 크기
medium: 중간 크기 (기본값)
large: 큰 크기

Small OptionMedium OptionLarge Option


import RadioButtonBasic from '@components/RadioButton/RadioButtonBasic';

function Example() {
  const [basicSelectedValue, setBasicSelectedValue] = useState("");

  const handleBasicChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setBasicSelectedValue(event.target.value);
  };

  return (
    <>
      <RadioButtonBasic
        name="basicOptions"
        value="option1"
        checked={basicSelectedValue === "option1"}
        onChange={handleBasicChange}
        label="Small Option"
        size="small"
        color="sky"
      />
      <RadioButtonBasic
        name="basicOptions"
        value="option2"
        checked={basicSelectedValue === "option2"}
        onChange={handleBasicChange}
        label="Medium Option"
        size="medium"
        color="blue"
      />
      <RadioButtonBasic
        name="basicOptions"
        value="option3"
        checked={basicSelectedValue === "option3"}
        onChange={handleBasicChange}
        label="Large Option"
        size="large"
        color="purple"
      />
    </>
  );
}

export default Example;

1.4. Changing the Color of the Radio Button

RadioButtonBasic 컴포넌트는 다양한 색상으로 제공됩니다. 기본 색상은 sky입니다:

sky: 하늘색
grey: 회색
blue: 파란색
purple: 보라색
green: 녹색
yellow: 노란색
red: 빨간색

Sky OptionGrey Option


import RadioButtonBasic from '@components/RadioButton/RadioButtonBasic';

function Example() {
  const [basicSelectedValue, setBasicSelectedValue] = useState("");

  const handleBasicChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setBasicSelectedValue(event.target.value);
  };

  return (
    <>
      <RadioButtonBasic
        name="basicOptions"
        value="option1"
        checked={basicSelectedValue === "option1"}
        onChange={handleBasicChange}
        label="Sky Option"
        size="medium"
        color="sky"
      />
      <RadioButtonBasic
        name="basicOptions"
        value="option2"
        checked={basicSelectedValue === "option2"}
        onChange={handleBasicChange}
        label="Grey Option"
        size="medium"
        color="grey"
      />
      {/* 기타 옵션들 */}
    </>
  );
}

export default Example;

1.5 Props

RadioButtonBasic 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`name`	라디오 버튼 그룹의 이름입니다.	`string`	`""`
`value`	라디오 버튼의 값입니다.	`string`	`""`
`checked`	라디오 버튼의 선택 상태를 설정합니다.	`boolean`	`false`
`onChange`	라디오 버튼의 상태가 변경될 때 호출되는 함수입니다.	`(event: React.ChangeEvent<HTMLInputElement>) => void`	`-`
`disabled`	라디오 버튼을 비활성화 상태로 설정합니다.	`boolean`	`false`
`size`	라디오 버튼의 크기를 설정합니다.	`"small" \| "medium" \| "large"`	`"medium"`
`color`	라디오 버튼의 색상을 설정합니다.	`string`	`"bg-[#9AC5E5]"`
`label`	라디오 버튼 옆에 표시될 라벨 텍스트입니다.	`string`	`""`

1.6. Full Example


import RadioButtonBasic from '@components/RadioButton/RadioButtonBasic';

function Example() {
  const [basicSelectedValue, setBasicSelectedValue] = useState("");

  const handleBasicChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setBasicSelectedValue(event.target.value);
  };

  return (
    <div>
      <RadioButtonBasic
        name="basicOptions"
        value="option1"
        checked={basicSelectedValue === "option1"}
        onChange={handleBasicChange}
        label="Option 1"
        size="small"
        color="sky"
      />
      <RadioButtonBasic
        name="basicOptions"
        value="option2"
        checked={basicSelectedValue === "option2"}
        onChange={handleBasicChange}
        label="Option 2"
        size="medium"
        color="blue"
      />
      <RadioButtonBasic
        name="basicOptions"
        value="option3"
        checked={basicSelectedValue === "option3"}
        onChange={handleBasicChange}
        label="Option 3"
        size="large"
        color="purple"
      />
    </div>
  );
}

export default Example;

2. RadioButtonDescription

RadioButtonDescription 컴포넌트는 라디오 버튼 옆에 라벨과 설명을 추가할 수 있는 컴포넌트입니다. 다양한 크기와 색상을 지원하며, 비활성화 옵션도 설정할 수 있습니다.

2.1 Import

import RadioButtonDescription from '@components/RadioButton/RadioButtonDescription';

2.2. Usage

기본 사용 예제는 아래와 같습니다:

Option 1This is a description for option 1.


import RadioButtonDescription from '@components/RadioButton/RadioButtonDescription';

function DescriptionExample() {
  const [selectedValue, setSelectedValue] = useState("");

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSelectedValue(event.target.value);
  };

  return (
    <RadioButtonDescription
      name="descriptionOptions"
      value="option1"
      checked={selectedValue === "option1"}
      onChange={handleChange}
      label="Option 1"
      description="This is a description for option 1."
      size="medium"
      color="blue"
    />
  );
}

export default DescriptionExample;

2.3. Changing the Size of the Radio Button

RadioButtonDescription 컴포넌트는 다양한 크기로 제공됩니다. 기본 크기는 medium입니다:

small: 작은 크기
medium: 중간 크기 (기본값)
large: 큰 크기

Small OptionThis is a description for the small option.

Medium OptionThis is a description for the medium option.

Large OptionThis is a description for the large option.


import RadioButtonDescription from '@components/RadioButton/RadioButtonDescription';

function SizeExample() {
  const [selectedValue, setSelectedValue] = useState("");

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSelectedValue(event.target.value);
  };

  return (
    <>
      <RadioButtonDescription
        name="descriptionOptions"
        value="option1"
        checked={selectedValue === "option1"}
        onChange={handleChange}
        label="Small Option"
        description="This is a description for the small option."
        size="small"
        color="sky"
      />
      <RadioButtonDescription
        name="descriptionOptions"
        value="option2"
        checked={selectedValue === "option2"}
        onChange={handleChange}
        label="Medium Option"
        description="This is a description for the medium option."
        size="medium"
        color="blue"
      />
      <RadioButtonDescription
        name="descriptionOptions"
        value="option3"
        checked={selectedValue === "option3"}
        onChange={handleChange}
        label="Large Option"
        description="This is a description for the large option."
        size="large"
        color="purple"
      />
    </>
  );
}

export default SizeExample;

2.4. Changing the Color of the Radio Button

RadioButtonDescription 컴포넌트는 다양한 색상으로 제공됩니다. 기본 색상은 sky입니다:

sky: 하늘색
grey: 회색
blue: 파란색
purple: 보라색
green: 녹색
yellow: 노란색
red: 빨간색

Sky OptionThis is a sky-colored option.

Grey OptionThis is a grey-colored option.

Blue OptionThis is a blue-colored option.


import RadioButtonDescription from '@components/RadioButton/RadioButtonDescription';

function ColorExample() {
  const [selectedValue, setSelectedValue] = useState("");

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSelectedValue(event.target.value);
  };

  return (
    <>
      <RadioButtonDescription
        name="descriptionOptions"
        value="option1"
        checked={selectedValue === "option1"}
        onChange={handleChange}
        label="Sky Option"
        description="This is a sky-colored option."
        size="medium"
        color="sky"
      />
      <RadioButtonDescription
        name="descriptionOptions"
        value="option2"
        checked={selectedValue === "option2"}
        onChange={handleChange}
        label="Grey Option"
        description="This is a grey-colored option."
        size="medium"
        color="grey"
      />
      <RadioButtonDescription
        name="descriptionOptions"
        value="option3"
        checked={selectedValue === "option3"}
        onChange={handleChange}
        label="Blue Option"
        description="This is a blue-colored option."
        size="medium"
        color="blue"
      />
      {/* 기타 옵션들 */}
    </>
  );
}

export default ColorExample;

2.5. Disabled State

RadioButtonDescription 컴포넌트는 비활성화된 상태로 설정할 수 있습니다. 이 상태에서는 사용자 입력을 받을 수 없습니다:

Disabled OptionThis option is disabled.


import RadioButtonDescription from '@components/RadioButton/RadioButtonDescription';

function DisabledExample() {
  const [selectedValue, setSelectedValue] = useState("");

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSelectedValue(event.target.value);
  };

  return (
    <RadioButtonDescription
      name="descriptionOptions"
      value="option1"
      checked={selectedValue === "option1"}
      onChange={handleChange}
      label="Disabled Option"
      description="This option is disabled."
      size="medium"
      color="blue"
      disabled
    />
  );
}

export default DisabledExample;

2.6. Props

RadioButtonDescription 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`name`	라디오 버튼 그룹의 이름입니다.	`string`	`""`
`value`	라디오 버튼의 값입니다.	`string`	`""`
`checked`	라디오 버튼의 선택 상태를 설정합니다.	`boolean`	`false`
`onChange`	라디오 버튼의 상태가 변경될 때 호출되는 함수입니다.	`(event: React.ChangeEvent<HTMLInputElement>) => void`	`-`
`disabled`	라디오 버튼을 비활성화 상태로 설정합니다.	`boolean`	`false`
`size`	라디오 버튼의 크기를 설정합니다.	`"small" \| "medium" \| "large"`	`"medium"`
`color`	라디오 버튼의 색상을 설정합니다.	`string`	`"bg-[#9AC5E5]"`
`label`	라디오 버튼 옆에 표시될 라벨 텍스트입니다.	`string`	`""`
`description`	라디오 버튼 옆에 표시될 설명 텍스트입니다.	`string`	`""`

2.7. Full Example


import RadioButtonInline from '@components/RadioButton/RadioButtonInline';

function FullExample() {
  const [selectedValue, setSelectedValue] = useState("");

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSelectedValue(event.target.value);
  };

  return (
    <div>
      <RadioButtonInline
        name="inlineOptions"
        value="option1"
        checked={selectedValue === "option1"}
        onChange={handleChange}
        label="Small Option"
        size="small"
        color="sky"
      />
      <RadioButtonInline
        name="inlineOptions"
        value="option2"
        checked={selectedValue === "option2"}
        onChange={handleChange}
        label="Medium Option"
        size="medium"
        color="blue"
      />
      <RadioButtonInline
        name="inlineOptions"
        value="option3"
        checked={selectedValue === "option3"}
        onChange={handleChange}
        label="Large Option"
        size="large"
        color="purple"
      />
      <RadioButtonInline
        name="inlineOptions"
        value="option4"
        checked={selectedValue === "option4"}
        onChange={handleChange}
        label="Disabled Option"
        size="medium"
        color="grey"
        disabled
      />
    </div>
  );
}

export default FullExample;

3. RadioButtonInline

RadioButtonInline 컴포넌트는 사용자가 선택할 수 있는 인라인 스타일의 라디오 버튼을 제공합니다. 다양한 크기와 색상을 지정할 수 있으며, 비활성화 옵션도 지원합니다.

3.1. Import

import RadioButtonInline from '@components/RadioButton/RadioButtonInline';

3.2. Usage

기본 사용 예제는 아래와 같습니다:

Option 1Option 2Option 3Option 4Option 5Option 6Option 7


import RadioButtonInline from '@components/RadioButton/RadioButtonInline';

function Example() {
  const [selectedValue, setSelectedValue] = useState("");

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSelectedValue(event.target.value);
  };

  return (
    <RadioButtonInline
      name="inlineOptions"
      value="option1"
      checked={selectedValue === "option1"}
      onChange={handleChange}
      label="Option 1"
      size="medium"
      color="blue"
    />
  );
}

export default Example;

3.3. Changing the Size of the Radio Button

RadioButtonInline 컴포넌트는 다양한 크기로 제공됩니다. 기본 크기는 medium입니다:

small: 작은 크기
medium: 중간 크기 (기본값)
large: 큰 크기

Small OptionMedium OptionLarge Option


import RadioButtonInline from '@components/RadioButton/RadioButtonInline';

function SizeExample() {
  const [selectedValue, setSelectedValue] = useState("");

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSelectedValue(event.target.value);
  };

  return (
    <>
      <RadioButtonInline
        name="inlineOptions"
        value="option1"
        checked={selectedValue === "option1"}
        onChange={handleChange}
        label="Small Option"
        size="small"
        color="sky"
      />
      <RadioButtonInline
        name="inlineOptions"
        value="option2"
        checked={selectedValue === "option2"}
        onChange={handleChange}
        label="Medium Option"
        size="medium"
        color="blue"
      />
      <RadioButtonInline
        name="inlineOptions"
        value="option3"
        checked={selectedValue === "option3"}
        onChange={handleChange}
        label="Large Option"
        size="large"
        color="purple"
      />
    </>
  );
}

export default SizeExample;

3.4. Changing the Color of the Radio Button

RadioButtonInline 컴포넌트는 다양한 색상으로 제공됩니다. 기본 색상은 sky입니다:

sky: 하늘색
grey: 회색
blue: 파란색
purple: 보라색
green: 녹색
yellow: 노란색
red: 빨간색


import RadioButtonInline from '@components/RadioButton/RadioButtonInline';

function ColorExample() {
  const [selectedValue, setSelectedValue] = useState("");

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSelectedValue(event.target.value);
  };

  return (
    <>
      <RadioButtonInline
        name="inlineOptions"
        value="option1"
        checked={selectedValue === "option1"}
        onChange={handleChange}
        label="Sky Option"
        size="medium"
        color="sky"
      />
      <RadioButtonInline
        name="inlineOptions"
        value="option2"
        checked={selectedValue === "option2"}
        onChange={handleChange}
        label="Grey Option"
        size="medium"
        color="grey"
      />
      <RadioButtonInline
        name="inlineOptions"
        value="option3"
        checked={selectedValue === "option3"}
        onChange={handleChange}
        label="Blue Option"
        size="medium"
        color="blue"
      />
      <RadioButtonInline
        name="inlineOptions"
        value="option4"
        checked={selectedValue === "option4"}
        onChange={handleChange}
        label="Purple Option"
        size="medium"
        color="purple"
      />
      <RadioButtonInline
        name="inlineOptions"
        value="option5"
        checked={selectedValue === "option5"}
        onChange={handleChange}
        label="Green Option"
        size="medium"
        color="green"
      />
      <RadioButtonInline
        name="inlineOptions"
        value="option6"
        checked={selectedValue === "option6"}
        onChange={handleChange}
        label="Yellow Option"
        size="medium"
        color="yellow"
      />
      <RadioButtonInline
        name="inlineOptions"
        value="option7"
        checked={selectedValue === "option7"}
        onChange={handleChange}
        label="Red Option"
        size="medium"
        color="red"
      />
    </>
  );
}

export default ColorExample;

3.5. Props

RadioButtonInline 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`name`	라디오 버튼 그룹의 이름입니다.	`string`	`""`
`value`	라디오 버튼의 값입니다.	`string`	`""`
`checked`	라디오 버튼의 선택 상태를 설정합니다.	`boolean`	`false`
`onChange`	라디오 버튼의 상태가 변경될 때 호출되는 함수입니다.	`(event: React.ChangeEvent<HTMLInputElement>) => void`	`-`
`disabled`	라디오 버튼을 비활성화 상태로 설정합니다.	`boolean`	`false`
`size`	라디오 버튼의 크기를 설정합니다.	`"small" \| "medium" \| "large"`	`"medium"`
`color`	라디오 버튼의 색상을 설정합니다.	`string`	`"bg-[#9AC5E5]"`
`label`	라디오 버튼 옆에 표시될 라벨 텍스트입니다.	`string`	`""`

3.6. Full Example


import RadioButtonInline from '@components/RadioButton/RadioButtonInline';

function FullExample() {
  const [selectedValue, setSelectedValue] = useState("");

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSelectedValue(event.target.value);
  };

  return (
    <div>
      <RadioButtonInline
        name="inlineOptions"
        value="option1"
        checked={selectedValue === "option1"}
        onChange={handleChange}
        label="Small Option"
        size="small"
        color="sky"
      />
      <RadioButtonInline
        name="inlineOptions"
        value="option2"
        checked={selectedValue === "option2"}
        onChange={handleChange}
        label="Medium Option"
        size="medium"
        color="blue"
      />
      <RadioButtonInline
        name="inlineOptions"
        value="option3"
        checked={selectedValue === "option3"}
        onChange={handleChange}
        label="Large Option"
        size="large"
        color="purple"
      />
      <RadioButtonInline
        name="inlineOptions"
        value="option4"
        checked={selectedValue === "option4"}
        onChange={handleChange}
        label="Disabled Option"
        size="medium"
        color="grey"
        disabled
      />
    </div>
  );
}

export default FullExample;