<Radio>
Component
<Radio>
is an interactive control in order to select single option.
Here the demo:
<Radio>
Component<Radio>
is an interactive control in order to select single option.
Here the demo:
<Radio>
ComponentThere are 2 ways to install <Radio>
component into your react app project:
The alternative appearances of the <Radio>
layout without changing the <Radio>
's functionality.
checkStyle
PropertySets the alternative appearances of the <Radio>
.
The possible values are:
undefined
'regular'
'switch'
'button'
'toggleButton'
Here the preview:
size
PropertyDefines the alternative size of the <Radio>
.
The possible values are:
undefined
'sm'
'md'
'lg'
Here the preview:
theme
PropertyDefines the contextual theme of the <Radio>
.
The possible values are:
undefined
'primary'
'secondary'
'success'
'info'
'warning'
'danger'
'light'
'dark'
Here the preview:
gradient
PropertyActivates a 3D mode of the <Radio>
.
The possible values are:
undefined
'inherit'
true
false
Here the preview:
outlined
PropertyActivates an outlined mode (background-less, contrast foreground, and contrast border) of the <Radio>
.
The possible values are:
undefined
'inherit'
true
false
Here the preview:
mild
PropertyActivates a mild mode (mild background, contrast foreground, and contrast border) of the <Radio>
.
The possible values are:
undefined
'inherit'
true
false
Here the preview:
nude
PropertyActivates an nude mode (background-less, padding-less, and border-less) of the <Radio>
.
The possible values are:
undefined
true
false
Here the preview:
The conditions of the <Radio>
behavior or functionality.
enabled
PropertyDefines the enabled/disabled state of the <Radio>
.
The possible values are:
undefined
true
false
Here the preview:
inheritEnabled
PropertyInfluences the <Radio>
's disabled state by <ancestor enabled={false}>
.
The possible values are:
undefined
true
false
Here the preview:
readOnly
PropertyDefines the readOnly/mutable state of the <Radio>
.
The possible values are:
undefined
true
false
inheritReadOnly
PropertyInfluences the <Radio>
's readOnly
by <ancestor readOnly={true}>
.
The possible values are:
undefined
true
false
active
PropertyDefines the current active state of the <Radio>
.
The possible values are:
undefined
true
false
Here the preview:
inheritActive
PropertyInfluences the <Radio>
's active state by <ancestor active={true}>
.
The possible values are:
undefined
true
false
Here the preview:
enableValidation
PropertyActivates the valid/invalid indicator of the <Radio>
.
The possible values are:
undefined
true
false
isValid
PropertyMarks the validity status of the <Radio>
.
The possible values are:
undefined
null
true
false
Here the preview:
inheritValidation
PropertyInfluences the <Radio>
's valid/invalid indicator by <ancestor isValid={true|false} enableValidation={true}>
.
The possible values are:
undefined
true
false
Because <Radio>
is made from <Check>
, so all properties from <Check>
are inherited.
There are several variables of <Radio>
you can customize. Changing the variables affects all <Radio>
instance and other components that depend on <Radio>
.
Here the exposed variables:
The example of accessing, modifying, & adding variables: