Materialish

Choice Chip

Choice chips allow for the selection of a single chip from a set of options. They are an alternative to dropdowns and radio buttons.

🙌 Heads up! This code is editable. The preview above will update to reflect your changes.

Usage

import { ChoiceChip } from 'materialish';
import 'materialish/materialish.css';

Props

Prop NameDefault ValueDescription
childrenThe contents that are rendered within the chip
classNameAdditional class name(s) to add to the chip
rippletrueWhether or not to display the "ripple" effect
iconA Materialish icon element to render in the chip
nodeRefPass a ref to get access to the input node
...restOther props are placed on the underlying input element

CSS Variables

VariableDefault ValueDescription
--mt-baseFontSize1remThe text size and dimensions of the chip are based off of this value
--mt-fontFamily'Roboto'The font family to use for the chip text
--mt-chip-rippleColor--mt-mainColor, #2196f3The color of the ripple will be based off of this value
--mt-chip-backgroundColor#e0dfe0The background color of the chip
--mt-chip-backgroundColorFocusrgba(51, 51, 51, 0.2)The background color of the chip when it is focused
--mt-chip-backgroundColorActive#d9edffThe background color of the chip when is active
--mt-chip-backgroundColorActiveFocusrgba(33, 150, 243, 0.2)The background color of the chip when it active and focused
--mt-chip-textColor#212121The text color for the chip
--mt-chip-textColorActive#005496The text color for the active chip

Useful Links