Chip

Designer doc

Chips are interactive compact elements that represent an input, short information, or action. It is often used in forms, text fields and category choices. It allows users to quickly recognise information, make selections, filter content, or trigger actions.

Examples

Basic Chips

Basic Chip is usually used only for data display or action.

View code

There are also three more types of Chips - InputChips, FilterChips, and ChoiceChips. These chips wrap the basic Chip and each has different input purposes.

Input Chips

Material Design: https://material.io/components/chips/#input-chips
Ant Design: https://ant.design/components/tag/#components-tag-demo-basic

Input chips represent a complex piece of information in compact form, such as an entity (person, place, or thing) or text. They enable user input and verify that input by converting text into chips.

InputChips must be a controlled component i.e. handle the deletion yourself.

View code

Filter Chips

Material Design: https://material.io/components/chips/#filter-chips
Angular Material: https://material.angular.io/components/chips/overview#mat-chip-list-0
Ant Design: https://ant.design/components/tag/#components-tag-demo-hot-tags
WAI-ARIA: https://www.w3.org/TR/wai-aria-1.0/states_and_properties#aria-multiselectable

Filter chips use tags or descriptive words to filter content. This type of chips clearly delineate and display options in a compact area. They are a good alternative to toggle buttons or checkboxes.

View code

By default, filter chips have basic variant. This can be overrided for other variants such as capsule-outlined and capsule-contained filter chips.

View code

capsule-large filter chips have a description to provide more information for the filter chip option.

View code

Choice Chips

Material Design: https://material.io/components/chips/#choice-chips

Choice chips allow selection of a single chip from a set of options. This type of chips is a good alternative to toggle buttons, radio buttons, and single select menus.

View code

By default, choice chips have basic variant. This can be overrided for other variants such as capsule-outlined and capsule-contained choice chips.

View code

capsule-large choice chips have a description to provide more information for the choice chip option.

View code

Controlling values

As you can see, examples above use initialValue prop to demonstrate the most basic usage. However, in real cases normally you want to control the value instead.

View code

Accessibility

Each of InputChips, FilterChips, and ChoiceChips are navigatable with keyboard arrow keys. This interaction is implemented with technique known as roving tabIndex.

For InputChips, you can use Backspace to delete the focused Chip.

Relevant components

References

Material Design: https://material.io/components/chips/#
Angular Material: https://material.angular.io/components/chips/overview
Material UI: https://material-ui.com/components/chips/

API

Chip

Prop name	Type	Description
as	void \| WebTarget	Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
forwardedAs	void \| WebTarget
theme	DefaultTheme

ChoiceChip

Prop name	Type	Description
as	any	Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
clickable	boolean
description	ReactNode	Description to show for capsule-large choice and filter chips.
disabled	boolean	Equivalent to button's disabled property.
index	number	Order index for keyboard navigation using arrow keys. By default, this prop is automatically added by the parent.
keyboardClickKeys	string[]
leftElement	ReactNode	Element to be added on the left side of the label. Equivalent to adding the element manually on the label with a certain margin.
onBlur	FocusEventHandler<HTMLDivElement>
onClick	MouseEventHandler<HTMLDivElement>
onKeyDown	KeyboardEventHandler<HTMLDivElement>
onKeyUp	KeyboardEventHandler<HTMLDivElement>
onMouseDown	MouseEventHandler<HTMLDivElement>
onMouseLeave	MouseEventHandler<HTMLDivElement>
onMouseUp	MouseEventHandler<HTMLDivElement>
onRelease	EventHandler<SyntheticEvent<HTMLDivElement, Event>>	Callback that's triggered after click i.e. mouseup and keyup of enter or space.
onTouchEnd	TouchEventHandler<HTMLDivElement>
onTouchStart	TouchEventHandler<HTMLDivElement>
rightElement	ReactNode	Element to be added on the right side of the label. Equivalent to adding the element manually on the label with a certain margin.
value	Value	Unique value.
variant	ChipVariants

ChoiceChipList

Prop name	Type	Description
as	any	Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
initialValue	Value	Uncontrolled value (single) of the selected chip.
onChange	(value: Value) => void	Callback after selected chip changes. null is given when currently selected chip is selected.
value	Value	Controlled value (single) of the selected chip.
variant	ChipVariants

FilterChip

Prop name	Type	Description
as	any	Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
clickable	boolean
description	ReactNode	Description to show for capsule-large choice and filter chips.
disabled	boolean	Equivalent to button's disabled property.
index	number	Order index for keyboard navigation using arrow keys. By default, this prop is automatically added by the parent.
keyboardClickKeys	string[]
leftElement	ReactNode	Element to be added on the left side of the label. Equivalent to adding the element manually on the label with a certain margin.
onBlur	FocusEventHandler<HTMLDivElement>
onClick	MouseEventHandler<HTMLDivElement>
onKeyDown	KeyboardEventHandler<HTMLDivElement>
onKeyUp	KeyboardEventHandler<HTMLDivElement>
onMouseDown	MouseEventHandler<HTMLDivElement>
onMouseLeave	MouseEventHandler<HTMLDivElement>
onMouseUp	MouseEventHandler<HTMLDivElement>
onRelease	EventHandler<SyntheticEvent<HTMLDivElement, Event>>	Callback that's triggered after click i.e. mouseup and keyup of enter or space.
onTouchEnd	TouchEventHandler<HTMLDivElement>
onTouchStart	TouchEventHandler<HTMLDivElement>
rightElement	ReactNode	Element to be added on the right side of the label. Equivalent to adding the element manually on the label with a certain margin.
value	Value	Unique value.
variant	ChipVariants

FilterChipList

Prop name	Type	Default	Description
as	any		Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
initialSelected	Value[]	[]	Uncontrolled value (multiple) of the selected chips.
onChange	(selected: Value[]) => void		Callback when a chip is selected or deselected.
selected	Value[]		Controlled value (multiple) of the selected chips.
variant	ChipVariants

InputChip

Prop name	Type	Default	Description
as	any		Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.
clickable	boolean
description	ReactNode		Description to show for capsule-large choice and filter chips.
disableNavigation	boolean
disabled	boolean		Equivalent to button's disabled property.
index	number		Order index for keyboard navigation using arrow keys. By default, this prop is automatically added by the parent.
invalid	boolean
keyboardClickKeys	string[]
leftElement	ReactNode		Element to be added on the left side of the label. Equivalent to adding the element manually on the label with a certain margin.
onBlur	FocusEventHandler<HTMLDivElement>
onClick	MouseEventHandler<HTMLDivElement>
onDelete	(e: SyntheticEvent<HTMLDivElement, Event>) => void		Callback on Backspace key or delete icon is clicked. If this callback is not provided, icon is not rendered - meaning it's not deletable.
onKeyDown	KeyboardEventHandler<HTMLDivElement>
onKeyUp	KeyboardEventHandler<HTMLDivElement>
onMouseDown	MouseEventHandler<HTMLDivElement>
onMouseLeave	MouseEventHandler<HTMLDivElement>
onMouseUp	MouseEventHandler<HTMLDivElement>
onRelease	EventHandler<SyntheticEvent<HTMLDivElement, Event>>		Callback that's triggered after click i.e. mouseup and keyup of enter or space.
onTouchEnd	TouchEventHandler<HTMLDivElement>
onTouchStart	TouchEventHandler<HTMLDivElement>
rightElement	ReactNode		Element to be added on the right side of the label. Equivalent to adding the element manually on the label with a certain margin.
variant	ChipVariants	text

InputChipList

Prop name	Type	Default	Description
as	any		Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

Examples

Basic Chips

Input Chips

Filter Chips

Choice Chips

Controlling values

Accessibility

Relevant components

References

API

Chip

ChoiceChip

ChoiceChipList

FilterChip

FilterChipList

InputChip

InputChipList

Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.

Designer

Get started Foundation Components

Developer

Get started Foundation Components

Blogs

All blogs

About us

Coral Team Contact and newsletter

Resources

Figma UI kit Icon library Coral branding

Chip

Chips are interactive compact elements that represent an input, short information, or action. It is often used in forms, text fields and category choices. It allows users to quickly recognise information, make selections, filter content, or trigger actions.

Examples

Basic Chips

Basic Chip is usually used only for data display or action.

There are also three more types of Chips - InputChips, FilterChips, and ChoiceChips. These chips wrap the basic Chip and each has different input purposes.

Input Chips

Input chips represent a complex piece of information in compact form, such as an entity (person, place, or thing) or text. They enable user input and verify that input by converting text into chips.

InputChips must be a controlled component i.e. handle the deletion yourself.

Filter Chips

Filter chips use tags or descriptive words to filter content. This type of chips clearly delineate and display options in a compact area. They are a good alternative to toggle buttons or checkboxes.

By default, filter chips have basic variant. This can be overrided for other variants such as capsule-outlined and capsule-contained filter chips.

capsule-large filter chips have a description to provide more information for the filter chip option.

Choice Chips

Choice chips allow selection of a single chip from a set of options. This type of chips is a good alternative to toggle buttons, radio buttons, and single select menus.

By default, choice chips have basic variant. This can be overrided for other variants such as capsule-outlined and capsule-contained choice chips.

capsule-large choice chips have a description to provide more information for the choice chip option.

Controlling values

As you can see, examples above use initialValue prop to demonstrate the most basic usage. However, in real cases normally you want to control the value instead.

Accessibility

Each of InputChips, FilterChips, and ChoiceChips are navigatable with keyboard arrow keys. This interaction is implemented with technique known as roving tabIndex.

For InputChips, you can use Backspace to delete the focused Chip.

Relevant components

References

API

Chip

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

ChoiceChip

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

Description to show for capsule-large choice and filter chips.

Equivalent to button's disabled property.

Order index for keyboard navigation using arrow keys. By default, this prop is automatically added by the parent.

Element to be added on the left side of the label. Equivalent to adding the element manually on the label with a certain margin.

Callback that's triggered after click i.e. mouseup and keyup of enter or space.

Element to be added on the right side of the label. Equivalent to adding the element manually on the label with a certain margin.

Unique value.

ChoiceChipList

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

Uncontrolled value (single) of the selected chip.

Callback after selected chip changes. null is given when currently selected chip is selected.

Controlled value (single) of the selected chip.

FilterChip

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

Description to show for capsule-large choice and filter chips.

Equivalent to button's disabled property.

Order index for keyboard navigation using arrow keys. By default, this prop is automatically added by the parent.

Element to be added on the left side of the label. Equivalent to adding the element manually on the label with a certain margin.

Callback that's triggered after click i.e. mouseup and keyup of enter or space.

Element to be added on the right side of the label. Equivalent to adding the element manually on the label with a certain margin.

Unique value.

FilterChipList

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

Uncontrolled value (multiple) of the selected chips.

Callback when a chip is selected or deselected.

Controlled value (multiple) of the selected chips.

InputChip

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.

Description to show for capsule-large choice and filter chips.

Equivalent to button's disabled property.

Order index for keyboard navigation using arrow keys. By default, this prop is automatically added by the parent.

Element to be added on the left side of the label. Equivalent to adding the element manually on the label with a certain margin.

Callback on Backspace key or delete icon is clicked. If this callback is not provided, icon is not rendered - meaning it's not deletable.

Callback that's triggered after click i.e. mouseup and keyup of enter or space.

Element to be added on the right side of the label. Equivalent to adding the element manually on the label with a certain margin.

InputChipList

Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended.