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.


npm i @synerise/ds-card-select


yarn add @synerise/ds-card-select


description="With description"
icon={<IconComponent />}
onChange={() => store !== 0 && setStore(0)}



classNameThe name of the containerstring-
sizeThe size of the cardsmall / mediummedium
raisedDefines if the component casts shadow on the backgroundboolean-
iconDefines the URL of the iconstring-
iconSizeDefines the size of the iconnumber82 px for medium size, 48 px for small size
titleDefines the title of the cardstring-
descriptionDefines the description of the card (not available for small size)string-
valueDefines if the card is selected by a userbooleanfalse
tickVisibleDefines the display of the checkboxbooleantrue
disabledDefines if the card is disabled (onChange still fires)boolean-
customTickVisibleDefines if the checkbox is customboolean-
customTickVisibleComponentCustom checkbox componentReactNode-
stretchToFitAligns the height of each cardboolean-
clearTooltipDefines the title of clear icon tooltipstring-
thickSizeThe size of the thicksmall / mediummedium
themePalette of colorsstring-
elementsPositionDefines the position of the elements on the cardstringcenter
widthDefines the width of Group of cardslarge / smalllarge


onChangeHandler for the state change(state: boolean) => void-
onClickHandler for click (onChange will not fire if onClick is provided)() => void-