Radio-group
How to use the Radio-group component from the Horizon kit.
import { Canvas } from "@react-three/fiber"; import { Fullscreen } from "@react-three/uikit"; import { Text } from '@react-three/uikit' import { RadioGroup, RadioGroupItem } from '@react-three/uikit-horizon' function RadioGroupDemo() { return ( <RadioGroup defaultValue="comfortable"> <RadioGroupItem value="default"> <Text>Default</Text> </RadioGroupItem> <RadioGroupItem value="comfortable"> <Text>Comfortable</Text> </RadioGroupItem> <RadioGroupItem value="compact"> <Text>Compact</Text> </RadioGroupItem> </RadioGroup> ) } export default function App() { return ( <Canvas style={{ position: "absolute", inset: "0", touchAction: "none" }} gl={{ localClippingEnabled: true }}> <ambientLight intensity={0.5} /> <directionalLight intensity={1} position={[-5, 5, 10]} /> <Fullscreen overflow="scroll" flexDirection="column" alignItems="center" padding={32} > <RadioGroupDemo /> </Fullscreen> </Canvas> ) }
import { Radio-group } from "@react-three/uikit-horizon";