라디오

사용자가 여러 옵션 중에서 하나만 선택할 수 있을 때 사용됩니다.

사용법
프로퍼티

import { Radio } from "twenty-ui/display";

export const MyComponent = () => {

  const handleRadioChange = (event) => {
    console.log("Radio button changed:", event.target.checked);
  };

  const handleCheckedChange = (checked) => {
    console.log("Checked state changed:", checked);
  };


  return (
    <Radio
      checked={true}
      value="Option 1"
      onChange={handleRadioChange}
      onCheckedChange={handleCheckedChange}
      size="large"
      disabled={false}
      labelPosition="right"
    />
  );
};

프로퍼티	유형	설명
스타일	`React.CSS` 속성	컴포넌트의 추가 인라인 스타일
클래스 네임	문자열	추가 스타일링을 위한 선택적 CSS 클래스
체크됨	부울	라디오 버튼이 체크되었는지 여부를 나타냅니다
값	문자열	라디오 버튼과 연결된 라벨 또는 텍스트
onChange	함수	선택된 라디오 버튼이 변경될 때 호출되는 기능
onCheckedChange	함수	라디오 버튼의 `체크` 상태가 변경될 때 호출되는 기능
크기	문자열	라디오 버튼의 크기입니다. 옵션에는 `large`와 `small`이 포함됩니다
비활성화됨	부울	`참`이면 라디오 버튼이 비활성화되어 클릭할 수 없습니다
라벨 위치	문자열	라벨 텍스트의 라디오 버튼에 대한 상대 위치입니다. 두 가지 옵션: `left`와 `right`

라디오 그룹

관련된 라디오 버튼들을 그룹화합니다.

사용법
프로퍼티

import React, { useState } from "react";
import { Radio, RadioGroup } from "twenty-ui/display";

export const MyComponent = () => {

  const [selectedValue, setSelectedValue] = useState("Option 1");

  const handleChange = (event) => {
    setSelectedValue(event.target.value);
  };
  
  return (
    <RadioGroup value={selectedValue} onChange={handleChange}>
      <Radio value="Option 1" />
      <Radio value="Option 2" />
      <Radio value="Option 3" />
    </RadioGroup>
  );
};

프로퍼티	유형	설명
값	문자열	현재 선택된 라디오 버튼의 값
onChange	기능	라디오 버튼이 변경될 때 트리거되는 콜백 기능
onValueChange	기능	그룹에서 선택된 값이 변경될 때 트리거되는 콜백 기능.
자식	`React.ReactNode`	Radio와 같은 React 컴포넌트를 자식으로 Radio Group에 전달할 수 있습니다

Welcome

Core Concepts

라디오 그룹

​라디오 그룹

라디오 그룹