RadioChip

An option to select in an inline fashion, as opposed to regular radio buttons.

If you don't need too much customization, consider using RadioChipGroup, which offers a nice way to generate lists of options.

Showcase

opt 1

opt 2

opt 3

Source

<RadioChip value="wrong" name="selection" outline>opt 1</RadioChip>
<RadioChip value="right" name="selection" small>opt 2</RadioChip>
<RadioChip value="opt 3" name="selection" />

Properties #

Style Properties

Name	Default	Type	Description
`small`	`false`	`boolean`	Makes the chip smaller.
`outline`	`false`	`boolean`	Adds a border to the chip instead of the background.
`noPadding`	`false`	`boolean`	Clears the internal padding. Useful if you want to handle spacing yourself.

Functional Properties

Name	Default	Type	Description
`value` *		`any`	The value of this radio button. Included in events and can be bound to using `bind:group`.
`name` *		`string`	The name of the group to relate this radio chip to. Check MDN docs for more information.
`disabled`	`false`	`boolean`	Disables the chip and disallows selection.
`group`	`null`	`string`	The currently selected value among the radio chips with the same name. Often used with a two-way binding: `bind:group`.
`title`	`null`	`string`	The tooltip to give to a chip.
`...`		`any`	Everything else will be passed to the underlying `<input>` element.

* Required

Class Properties

All <RadioChip> components use the .input-chip and .radio-chip classes.

Falsy values passed to classes will be disregarded.

Name	Default	Type	Description
`class`	`null`	`string`	A class string to add to the component.
`inputClass`	`null`	`string`	A class string to add to the `<input>` element.
`chipClass`	`null`	`string`	A class string to add to the underlying Chip element.

Events #

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

Slots #

Default slot

The content of the chip. Contains the string representation of the value by default.

SCSS Variables #

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