Aware Controls | JavaScript (ES5) Chip Demos

The Chip is a compact unit of vital information that responds to a click action. It can include text, an image, or both, and is commonly utilized in contacts, emails, or filter tags.

Chips

const chipData = [
	{ text: "Aware", cssClass: "a-success" },
	{ text: "Google", cssClass: "a-primary" },
	{ text: "Intel", cssClass: "a-danger" },
	{ text: "Microsoft", cssClass: "a-info" },
	{ text: "Tesla", cssClass: "a-warning" }
];

new ac.buttons.ChipList({ chips: chipData }, "#cntlChips");

<div id="cntlChips"></div>

Input Chips

A simple chip with a delete icon allows you to remove chips from the collection.

const inputData = [
	{ text: "Alien", leadingIconCss: "alien" },
	{ text: "Truck", leadingIconCss: "truck" },
	{ text: "Plane", leadingIconCss: "plane" },
	{ text: "Rocket", leadingIconCss: "rocket" }
];

new ac.buttons.ChipList({ chips: inputData, cssClass: "a-outline", enableDelete: true }, "#cntlInputChips");

<div id="cntlInputChips"></div>

Filter Chips

A filter chip allows you to select multiple options from the available choices.

const filterData = [
	{ text: "Extra small" },
	{ text: "Small" },
	{ text: "Medium" },
	{ text: "Large" },
	{ text: "Extra large" }
];

new ac.buttons.ChipList({ chips: filterData, selection: "Multiple", selectedChips: [1, 4] }, "#cntlFilterChips");

<div id="cntlFilterChips"></div>

Choice Chips

A choice chip allows you to select an option from the available choices.

const choiceData = [
	{ text: "Play a game", leadingIconCss: "game", value: "game" },
	{ text: "Watch a movie", leadingIconCss: "movie", value: "movie" },
	{ text: "Read a book", leadingIconCss: "book", value: "book" },
	{ text: "Travel the world", leadingIconCss: "travl", value: "travel" }
];

new ac.buttons.ChipList({ chips: choiceData, selection: "Single", cssClass: "a-outline", selectedChips: [3] }, "#cntlChoiceChips");

<div id="cntlChoiceChips"></div>