fun-chip

Chips are used for making selections or filtering content. They have two modes:

Single-select

In this mode chips behave like radio buttons. Only one chip can be selected at a time.

This pattern is useful when users must choose one item from a set, for instance in a wizard.

For use in forms consider using a standard radio button instead.

Chips must always be presented in a set of at least two.
Chips should be surrounded with a <radiogroup> with a label describing what the user is selecting. This can be achieved using the role="radiogroup" and aria-label attributes.
One of the chips may be selected by default but this is not required.

In this mode chips behave like checkboxes. Multiple chips can be selected.

This can be useful for adding filters to lists or when users may choose several items in a wizard.

For use in forms consider using a standard checkbox instead.

Chips can be used to make selections, filter content. They can act like either checkbox or radio inputs.

They should usually be presented in a group of at least two, not by themselves.

The chip can be tabbed to and selected using the space bar.

I’m a chip!

Property	Attribute	Required	Description	Type	Default
disabled	disabled	false	If disabled, this chip cannot be interacted with	`boolean`	`false`
name	name	false	Name of the chip. Included in events.	`string`
selected	selected	false	Is this item selected?	`boolean`	`false`
selectionMode	selection-mode	false	Selection mode of this chip.	`"multi"` \| `"none"` \| `"single"`	`'single'`
value	value	false	Value of the chip. Included in events.	`string`

Name	Description
`funChange`	Emitted when the chip is selected / un-selected.

Name	Description
default	the content of the chip

This documentation page generated from the source at fun-chip.tsx