@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 className of the container	string	-
size	The size of the card	`small` / `medium`	`medium`
raised	Defines border style	boolean	-
icon	Defines the icon	ReactNode	-
iconSize	Overwrites the predefined (82px for `medium` size, 48px for `small` size) size of the icon	number	-
title	Defines the title of the card	`ReactNode`	-
description	Defines the description of the card (not available for `small` size)	`ReactNode`	-
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	-
theme	Palette of colors	string	-
elementsPosition	Defines the position of the elements on the card	`left` / `right` / `center`	`center`

TagProps

accepts a subset of TagProps. See @synerise/ds-tag for API

Omit<TagProps, 'shape' | 'removable' | 'asPill' | 'onRemove' | 'image' | 'texts'>

CardSelectGroup

Property	Description	Type	Default
className	The name of the container	string	-
columns	Defines the number of columns. Defaults to 2, set to null to render all items in a single row	number / null	-
children	Deprecated. Use items prop instead	ReactNode	-
items	Array of CardSelect props to render CardSelect child elements	CardSelectProps & { key: string / numer}	-
width	Defines the size of the gap between items. Deprecated, use size prop	`small` / `large`	16px for `small`, 24px for `large` size
size	The size of the CardSelect items and gap between them	`small` / `medium`	`medium`

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 @synerise/ds-tag @synerise/ds-tooltip @synerise/ds-utils styled-is

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

4 months ago

4 months 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

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

9 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

11 months ago

1 year ago

1 year ago

12 months ago

12 months ago

1 year ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months ago

11 months ago

10 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year 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

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 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

4 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

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

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

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

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

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

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

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago