RadioGroup

RadioGroup is used to group related radio buttons.

Import

copy
import { RadioGroup } from '@trendmicro/react-styled-ui';

Usage

Uncontrolled radio group

EDITABLE EXAMPLE
copy
<RadioGroup defaultValue="1">
 <Stack spacing="1x" shouldWrapChildren>
 <Radio value="1">First</Radio>
 <Radio value="2">Second</Radio>
 <Radio value="3">Third</Radio>
 </Stack>
</RadioGroup>

Controlled radio group

EDITABLE EXAMPLE
copy
function Example() {
 const [value, setValue] = React.useState('1');
 
 return (
 <RadioGroup value={value} onChange={value => setValue(value)}>
 <Stack spacing="1x" shouldWrapChildren>
 <Radio value="1">First</Radio>
 <Radio value="2">Second</Radio>
 <Radio value="3">Third</Radio>
 </Stack>
 </RadioGroup>
 );
}

Group orientation

Make a set of radios appear horizontal stacked rather than vertically, by adding direction="row" to the Stack component.

EDITABLE EXAMPLE
copy
<RadioGroup defaultValue="1">
 <Stack direction="row" spacing="3x">
 <Radio value="1">Radio 1</Radio>
 <Radio value="2">Radio 2</Radio>
 <Radio value="3">Radio 3</Radio>
 </Stack>
</RadioGroup>

Colors

Use the variantColor prop to change the color scheme of the Radio. variantColor can be any color key with key 50(hover), 60(checked) that exist in the theme.colors.

EDITABLE EXAMPLE
copy
<RadioGroup variantColor="green" defaultValue="1">
 <Stack direction="row" spacing="3x">
 <Radio value="1">Radio 1</Radio>
 <Radio value="2">Radio 2</Radio>
 </Stack>
</RadioGroup>

Sizes

Use the size prop to change the size of the RadioGroup. You can set the value to sm, md, or lg.

EDITABLE EXAMPLE
copy
<Stack direction="column" spacing="4x" shouldWrapChildren>
 <RadioGroup size="sm" defaultValue="1">
 <Stack direction="row" spacing="3x">
 <Radio value="1">Radio 1</Radio>
 <Radio value="2">Radio 2</Radio>
 <Radio value="3">Radio 3</Radio>
 </Stack>
 </RadioGroup>
 <RadioGroup size="md" defaultValue="1">
 <Stack direction="row" spacing="3x">
 <Radio value="1">Radio 1</Radio>
 <Radio value="2">Radio 2</Radio>
 <Radio value="3">Radio 3</Radio>
 </Stack>
 </RadioGroup>
 <RadioGroup size="lg" defaultValue="1">
 <Stack direction="row" spacing="3x">
 <Radio value="1">Radio 1</Radio>
 <Radio value="2">Radio 2</Radio>
 <Radio value="3">Radio 3</Radio>
 </Stack>
 </RadioGroup>
</Stack>

States

EDITABLE EXAMPLE
copy
<Stack direction="column" spacing="2x" shouldWrapChildren>
 <RadioGroup defaultValue="1">
 <Stack direction="row" spacing="3x">
 <Radio value="1">Radio 1</Radio>
 <Radio value="2">Radio 2</Radio>
 <Radio value="3">Radio 3</Radio>
 </Stack>
 </RadioGroup>
 <RadioGroup disabled defaultValue="1">
 <Stack direction="row" spacing="3x">
 <Radio value="1">Radio 1</Radio>
 <Radio value="2">Radio 2</Radio>
 <Radio value="3">Radio 3</Radio>
 </Stack>
 </RadioGroup>
</Stack>

Asynchronous data loading

EDITABLE EXAMPLE
copy
function Example() {
 const [state, setState] = React.useState({
 state: 'idle',
 value: null,
 });
 const timerRef = React.useRef(null);
 const fetchData = React.useCallback(() => {
 setState(prevState => ({
 ...prevState,
 state: 'loading',
 value: null,
 }));
 
 if (timerRef.current) {
 clearTimeout(timerRef.current);
 timerRef.current = null;
 }
 timerRef.current = setTimeout(() => {
 setState({
 state: 'success',
 value: '1',
 });
 
 timerRef.current = null;
 }, 2000);
 }, []);
 
 React.useEffect(() => {
 fetchData();
 }, [fetchData]);
 
 return (
 <>
 <Box mb="4x">
 <LinkButton onClick={() => fetchData()}>
 <Flex align="center">
 <Icon icon="redo" spin={true} animationPlayState={state.state === 'loading' ? 'running' : 'paused'} />
 <Space width="2x" />
 Reload
 </Flex>
 </LinkButton>
 </Box>
 <RadioGroup
 value={state.value}
 disabled={state.state === 'loading'}
 onChange={nextValue => {
 setState(prevState => ({ ...prevState, value: nextValue }));
 }}
 >
 <Stack spacing="1x" shouldWrapChildren>
 <Radio value="1">First</Radio>
 <Radio value="2">Second</Radio>
 <Radio value="3">Third</Radio>
 </Stack>
 </RadioGroup>
 </>
 );
}

Props