CheckboxChip

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

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

Showcase

opt 1

opt 2

opt 3

Source

<CheckboxChip value="wrong" name="selection" outline>opt 1</CheckboxChip>
<CheckboxChip value="right" name="selection" small>opt 2</CheckboxChip>
<CheckboxChip 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` *		`string`	The value of this checkbox. Check MDN Docs for more information. Included in events unaltered (won't be stringified if not a string).
`name` *		`string`	The name of the group to relate this checkbox chip to. Check MDN docs for more information.
`checked`	`false`	`boolean`	Whether the chip is selected or not.
`disabled`	`false`	`boolean`	Disables the chip and disallows selection.
`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 <CheckboxChip> components use the .input-chip and .checkbox-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, checked, nativeEvent }`	Fired on selecting this chip in a group. The `value` contains the value that was passed to the checkbox (won't be stringified), `checked` is the state of the checkbox after the event and `nativeEvent` is the native `change` event of checkboxes.

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`