Card Select

A card select is a form of presenting a selectable option on a separate, usually rectangle-shaped, object.

When to use it

• To present a user with several types to choose from in one large module (for example, types of recommendations).

Component anatomy

This is a simple component, which means it doesn't consist of any other components.

Installation

npm i @synerise/ds-card-select

or

yarn add @synerise/ds-card-select

Usage

---

<CardSelect

title="Card"

description="With description"

value={true}

icon={<IconComponent />}

onChange={() => store !== 0 && setStore(0)}

tickVisible

/>

Demo

API

Property	Description	Type	Default
className	The name of the container	string	-
size	The size of the card	small / medium	medium
raised	Defines if the component casts shadow on the background	boolean	-
icon	Defines the URL of the icon	string	-
iconSize	Defines the size of the icon	number	82 px for medium size, 48 px for small size
title	Defines the title of the card	string	-
description	Defines the description of the card (not available for small size)	string	-
value	Defines if the card is selected by a user	boolean	false
tickVisible	Defines the display of the checkbox	boolean	true
disabled	Defines if the card is disabled (onChange still fires)	boolean	-
customTickVisible	Defines if the checkbox is custom	boolean	-
customTickVisibleComponent	Custom checkbox component	ReactNode	-
stretchToFit	Aligns the height of each card	boolean	-
clearTooltip	Defines the title of clear icon tooltip	string	-
thickSize	The size of the thick	small / medium	medium
theme	Palette of colors	string	-
elementsPosition	Defines the position of the elements on the card	string	center
width	Defines the width of Group of cards	large / small	large

Methods

Property	Description	Type	Default
onChange	Handler for the state change	(state: boolean) => void	-
onClick	Handler for click (onChange will not fire if onClick is provided)	() => void	-