Developer RadioGroup example
RadioGroup works as a controlling component and doesn't have an actual HTML element beneath it.
tsx
import React from 'react';
import Radio, { RadioGroup } from 'intergalactic/radio';
import { Text } from 'intergalactic/typography';
import { Flex } from 'intergalactic/flex-box';
const Demo = () => {
const [value, setValue] = React.useState('1');
return (
<div>
<RadioGroup
name='radio'
aria-labelledby='radioGroup'
value={value}
onChange={(v) => setValue(v)}
>
<Text id='radioGroup' size={200}>
Select dog breed
</Text>
<Flex mt={2} direction={'column'}>
<Radio mb={3} value={'1'} label={'Labrador Retriever'} />
<Radio mb={3} value={'2'} label={'German Shepherd'} />
<Radio mb={3} value={'3'} label={'Beagle'} />
</Flex>
</RadioGroup>
</div>
);
};
export default Demo;import React from 'react';
import Radio, { RadioGroup } from 'intergalactic/radio';
import { Text } from 'intergalactic/typography';
import { Flex } from 'intergalactic/flex-box';
const Demo = () => {
const [value, setValue] = React.useState('1');
return (
<div>
<RadioGroup
name='radio'
aria-labelledby='radioGroup'
value={value}
onChange={(v) => setValue(v)}
>
<Text id='radioGroup' size={200}>
Select dog breed
</Text>
<Flex mt={2} direction={'column'}>
<Radio mb={3} value={'1'} label={'Labrador Retriever'} />
<Radio mb={3} value={'2'} label={'German Shepherd'} />
<Radio mb={3} value={'3'} label={'Beagle'} />
</Flex>
</RadioGroup>
</div>
);
};
export default Demo;Additional props for input
Radio.Value hides a styled div and a hidden input. When you pass props to Radio.Value, a specific set of them is passed to the input props, while all others go to the Radio.Value.RadioMark div.
For more control over the input, you can pass props to Radio.Value.Control.
WARNING
🚨 Radio.Value.RadioMark should always be the next element after Radio.Value.Control in DOM.
tsx
import React from 'react';
import Radio, { RadioGroup } from 'intergalactic/radio';
const Demo = () => {
return (
<RadioGroup>
<Radio mb={3} value={'1'}>
<Radio.Value>
<Radio.Value.Control data-test-id={'TEST_ID'} />
<Radio.Value.RadioMark />
</Radio.Value>
<Radio.Text>First value</Radio.Text>
</Radio>
<Radio mb={3} value={'2'} label={'Second value'} />
</RadioGroup>
);
};
export default Demo;import React from 'react';
import Radio, { RadioGroup } from 'intergalactic/radio';
const Demo = () => {
return (
<RadioGroup>
<Radio mb={3} value={'1'}>
<Radio.Value>
<Radio.Value.Control data-test-id={'TEST_ID'} />
<Radio.Value.RadioMark />
</Radio.Value>
<Radio.Text>First value</Radio.Text>
</Radio>
<Radio mb={3} value={'2'} label={'Second value'} />
</RadioGroup>
);
};
export default Demo;