Chip

Pick options from a row of pills, one or several at a time.

A Chip alone works as a checkbox. Control it with checked and onChange, or let it keep its own state.

Chip.Group with multiple lets the user check several chips. onChange receives the values of the checked ones.

Without multiple, checking a chip unchecks the other, the way a radio group does.

Use the checked values to filter what is shown. Here the list narrows to the topics you picked.

Attribute	Description	Type	Accepted values	Default
value	value the chip adds to or takes from its `Chip.Group`	`string`	-	-
checked	checked state, to control the chip	`boolean`	-	-
initialChecked	checked state at the start	`boolean`	-	`false`
onChange	called with the new state when the chip is alone	`(checked: boolean) => void`	-	-
type	color of a checked chip	`'primary' \| 'secondary' \| 'success' \| 'warning' \| 'error' \| 'info'`	-	`primary`
disabled	block the chip	`boolean`	-	`false`
...	native props of the input	`InputHTMLAttributes`	-	-

Attribute	Description	Type	Accepted values	Default
value	values of the checked chips, to control it	`string[]`	-	-
initialValue	values checked at the start	`string[]`	-	`[]`
onChange	called with the values of the checked chips	`(value: string[]) => void`	-	-
multiple	allow several checked chips	`boolean`	-	`false`
disabled	block every chip of the group	`boolean`	-	`false`
...	native props	`HTMLAttributes`	-	-