
- 사용법
- 프로퍼티
복사
AI에게 묻기
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 |
라디오 그룹
관련된 라디오 버튼들을 그룹화합니다.- 사용법
- 프로퍼티
복사
AI에게 묻기
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에 전달할 수 있습니다 |