@synerise/ds-card-select NPM

id: card-select

title: 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

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	-

@synerise/ds-icon styled-is

@infinitebrahmanuniverse/nolb-_syn @everything-registry/sub-chunk-889 @zalastax/nolb-_syn

4 days ago

10 days ago

13 days ago

1 month ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

10 months ago

9 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago