RadioGroup

A group of radio buttons to present a list of selectable options.

Related Components
RadioButton
Showcase
Source 
<script>
  const items = [
    { value: '1', label: 'one' },
    { value: '2', label: 'two' },
  ];

  const colors = [
    { value: '#000000' },
    { value: '#ff0000' },
    { value: '#00ff00' },
    { value: '#ffffff' },
  ];
</script>

<RadioGroup {items} name="numbers" />
<RadioGroup color items={colors} name="colors" />

Properties #

Style Properties

Name
Default
Type
Description
labelsLeft false boolean Places the labels to the left of the radio buttons.

Functional Properties

Name
Default
Type
Description
items * Array An array of { value, label, disabled } objects, where only the value is required. Must contain at least one value.
name * string The name to assign to all radio buttons belonging to the same group. Check MDN docs for more information.
value null any The currently selected value of the group.
color false boolean Designates the radio buttons as color choices. Labels are ignored and values are expected to be "#RRGGBB".
... any Everything else will be passed to the underlying <RadioButton> components.
* Required

Class Properties

Falsy values passed to classes will be disregarded.

Name
Default
Type
Description
class null string A class string to assign to the wrapper <div> element.
radioClass null string A class string to add to the <RadioButton> components.
labelClass null string A class string to assign to the labels' wrapping <span>s.
If this is not passed, the labels are not wrapped in a <span>.

Events #

Name
Event Detail
Description
change { value, nativeEvent } Fired when the selection changes. The value contains the element's value passed as a prop and nativeEvent has the native change event.

SCSS Variables #

Name
Description
Default
$main From RadioButton The fill color of the selected radio button.
#4300B0
$font From RadioButton The font of the radio button's label. 'Ubuntu'
$disabled From RadioButton The fill color of the disabled radio button.
#888888
$dark From RadioButton The background color of the radio button hover signifier.
#333333
$light-contrast From RadioButton The border color of an unselected radio button, or the fill color of a selected disabled one.
#DDDDDD
$main-text From RadioButton The color of the dot inside the selected radio button.
#FFFFFF