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 Name Type Default Description name string The name used to reference the value of the control. If you don't provide this prop, it falls back to a randomly generated name. value string | number The value to be used in the radio input. This is the value that will be returned on form submission. disabled boolean false If true, all radios will be disabled. variantColor string The color of the radio when it's checked. This should be one of the color keys in the theme (e.g. 'green', 'red'). size string 'md' The size (width and height) of the radio. One of: 'sm', 'md', 'lg' defaultValue string | number The default input element value. Use when the component is not controlled. children ReactNode The children of the radio. onChange function A callback called when the state of the radio changes.
