Radio Box Group
Example
<RadioBoxGroup className="radio-box-group-style">
<RadioBox value="option-1">Radio Box 1</RadioBox>
<RadioBox value="option-2">Radio Box 2</RadioBox>
</RadioBoxGroup>
Output HTML
<div class="leafygreen-ui-k008qs radio-box-group-style">
<label
for="radio-box-group-850132-button-0"
class="leafygreen-ui-i6e9um"
>
<input
type="radio"
id="radio-box-group-850132-button-0"
name="radio-box-group-850132"
aria-checked="false"
aria-disabled="false"
class="leafygreen-ui-10udnlm"
value="option-1"
>
<div class="leafygreen-ui-1rd79mb"></div>
<div class="leafygreen-ui-1m9u12l leafygreen-ui-tv1yok">Radio Box 1</div>
</label>
<label
for="radio-box-group-850132-button-1"
class="leafygreen-ui-i6e9um"
>
<input
type="radio"
id="radio-box-group-850132-button-1"
name="radio-box-group-850132"
aria-checked="false"
aria-disabled="false"
class="leafygreen-ui-10udnlm"
value="option-2"
>
<div class="leafygreen-ui-1rd79mb"></div>
<div class="leafygreen-ui-1m9u12l leafygreen-ui-tv1yok">Radio Box 2</div>
</label>
</div>
Properties
size
Type: string
Default: default
Sets the style of the Radio Box Group. Valid sizes are compact
, full
and default
compact
adds padding to text, so there is no fixed width amongst a collection of boxesdefault
has a fixed width and text will wrap accordinglyfull
radio boxes will scale depending on available space (will take up 100% of their parent container). All boxes will tbe the same size
name
Type: string
Default: ''
Sets the name of the input group
value
Type: string
or number
Default: ``
Sets the radio that will apear checked on page load, also makes the component a controlled component
className
Type: string
Default: ''
Adds a className to the root element
onChange
Type: function
Default: () => {}
The event handler function for the 'onChange' event. Receives the associated event object as the first argument.
children
Type: node
Default: null
Content of the component
Any other properties supplied will be spread on the root element.
Rich Radio Input
Example
<RadioBox value="option-2">Radio Box 2</RadioBox>
Output HTML
<label
for="radio-box-group-746930-button-1"
class="leafygreen-ui-i6e9um"
>
<input
type="radio"
id="radio-box-group-746930-button-1"
name="radio-box-group-746930"
aria-checked="false"
aria-disabled="false"
class="leafygreen-ui-10udnlm"
value="option-2"
>
<div class="leafygreen-ui-1rd79mb"></div>
<div class="leafygreen-ui-1m9u12l leafygreen-ui-tv1yok">Radio Box 2</div>
</label>
Properties
value
Type: required, can be a string
or an number
Every radio needs a value prop
className
Type: string
Default: ``
Adds a className to the root element
checked
Type: boolean
Default: false
Indicates whether or not the box will be checked
disabled
Type: boolean
Default: false
Indicates whether or not the radio can be clicked by a user
children
Type: node
Default: null
Content that appears inside the Radio Box component
Any other properties supplied will be spread on the root element.