Chip Group

The RhChipGroup simplifies the process of creating selectable chips as a group and offers greater flexibility in customizing their selection behavior.

Usage

Once installed, you can import the RhChipGroup component into your React application:

copy

import {RhChipGroup} from "@rhythm-ui/react"

Then, you can use the RhChipGroup component in your JSX code:

copy

<div className="p-4">
	<RhChipGroup onSelectionChange={(value) => console.log("selection:", value)}>
		<RhChip value="Rhythm" />
		<RhChip value="Library" />
		<RhChip value="Wonder" />
	</RhChipGroup>
</div>

Chip Group Pros

Name	Type	Description
mandatory	boolean	Mandatory selection is needed, boolean value
children	React.ReactElement[]	JSX element
multiple	boolean	Select multiple chips
className	string	ClassName to be passed to the parent element
defaultSelecting	number \| number[]
onSelectionChange	(selected: number[]) => void	Return array of the index of icons selected
disableClicking	boolean	for disabling the item clickable property

Mandatory Select

The mandatory prop ensures that at least one option must be selected when component mounts.

copy

<div className="p-4">
	<RhChipGroup mandatory={true}>
		<RhChip value="Rhythm" />
		<RhChip value="Library" />
		<RhChip value="Wonder" />
	</RhChipGroup>
</div>

Select Multiple

The multiple prop enables the selection of multiple chips from the group of RhChip components

copy

<div className="p-4">
	<RhChipGroup
		multiple
		mandatory
		onSelectionChange={(value) => console.log("selection:", value)}
	>
		<RhChip value="Rhythm" />
		<RhChip value="Library" />
		<RhChip value="Wonder" />
	</RhChipGroup>
</div>

select default

the default for selecting the particular chip as per the defaultselecting value

copy

<div className="p-4">
	<RhChipGroup defaultselecting={[1, 2]}>
		<RhChip value="Rhythm" />
		<RhChip value="Library" />
		<RhChip value="Wonder" />
	</RhChipGroup>
</div>