RadioChipGroup

A set of options presented as chips with only one option to select.

If you need to allow selecting more than one option, consider using CheckboxChipGroup. If you need more customization for the chips, such as their slots, take a look at RadioChip, the building block of this component.

Showcase

Source

<script>
  const items = [
    { value: 1, label: 'option 1' },
    { value: 1.5, label: 'option 1.5', disabled: true },
    { value: 2, label: 'option 2' },
  ];
</script>

<RadioChipGroup {items} name="group1" />
<RadioChipGroup {items} name="group2" outline />
<RadioChipGroup {items} name="group3" small />

Properties #

Any properties of RadioChip can be specified – they will be passed down.

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 of this radio button group. Check MDN docs for more information.
`value`	`null`	`any`	The currently selected value of the group.
`...`		`any`	Everything else will be passed to the underlying `RadioChip` component.

* Required

Class Properties

Falsy values passed to classes will be disregarded.

Name	Default	Type	Description
`class`	`null`	`string`	A class string to add to the component.
`radioClass`	`null`	`string`	A class string to add to the `RadioChip` components inside.
`labelClass`	`null`	`string`	A class string to add to the wrapping `<span>` around the chips' labels. If it's not specified, the `<span>` will not be added.

Events #

Name	Event Detail	Description
`change`	`{ value, nativeEvent }`	Fired on selecting any chip in a group. The `value` contains the value of the selected chip (won't be stringified) and `nativeEvent` is the native `change` event of radio buttons.

SCSS Variables #

Name	Description	Default
`$chip-bg` From `RadioChip`	The background color of a non-outline chip.	rgba(0, 0, 0, .08)
`$chip-fg` From `RadioChip`	The text color of a chip.	#656565
`$chip-radius` From `RadioChip`	The curvature radius of a chip.	`1.5625em`
`$font` From `RadioChip`	The font of the chip text.	`'Ubuntu'`
`$main` From `RadioChip`	The border color of outline chips and the selection color.	#4300B0
`$bold-font-weight` From `RadioChip`	The bold font weight of the chips.	`500`