A selectable toggle layout component based on Tile component that is used as a generic container to build the base of panels, cards, lists and other content component.
<TileToggleGroup type="multiple" justify="center" className="bg-grey-100 p-3 w-full">
<TileToggleGroup.Item value="1" className="size-25" />
<TileToggleGroup.Item value="2" className="size-25" border />
</TileToggleGroup>
Color Scheme
As it extends Tile this has colour schemes available to use. The accent and interactive settings are available to customise the selected state.
<TileToggleGroup type="multiple">
<TileToggleGroup.Item value="1" className="size-25" border colorScheme={{ base: 'blue1' }} />
<TileToggleGroup.Item value="2" className="size-25" border colorScheme={{ base: 'blue2' }}/>
<TileToggleGroup.Item value="3" className="size-25" border colorScheme={{ base: 'purple1', accent: 'grey2' }}/>
<TileToggleGroup.Item value="4" className="size-25" border colorScheme={{ accent: 'purple2' }}/>
</TileToggleGroup>
Example use case (Card)
<TileToggleGroup type="multiple">
<TileToggleGroup.Item
value="a"
border
borderRadius='md'
className="w-80"
>
<article>
<Image src="https://picsum.photos/id/919/320/200" alt="Pine Forest" />
<div className="flex flex-col gap-4 px-3 py-4">
<Heading as="h2" size="xs">
Pine Forest
</Heading>
<Text>
Tall pine trees with slender trunks rise from a lush green forest floor.
</Text>
</div>
</article>
</TileToggleGroup.Item>
<TileToggleGroup.Item
value="b"
border
borderRadius='md'
className="w-80"
>
<article>
<Image src="https://picsum.photos/id/908/320/200" alt="Snow-Capped Peaks" />
<div className="flex flex-col gap-4 px-3 py-4">
<Heading as="h2" size="xs">
Snow-Capped Peaks
</Heading>
<Text>
Rugged mountain peaks blanketed in snow beneath a clear blue winter sky.
</Text>
</div>
</article>
</TileToggleGroup.Item>
</TileToggleGroup>