Selection Card Group

Component Status

React

Up to date

Usage


                                                        
                                                        
                                                            import { useState } from 'react';
                                                        import { Icon, SelectionCardGroup } from '@optimus-web/core';
                                                        import { IconName } from '@optimus-web/icons';
                                                        
                                                        const options = [
                                                            {
                                                                media: <Icon value={IconName.Security} variant="basic" />,
                                                                label: 'Admin',
                                                                value: 'admin',
                                                                name: 'admin',
                                                                description: 'Give full access',
                                                            },
                                                            {
                                                                media: <Icon value={IconName.Employees} variant="basic" />,
                                                                label: 'Roles',
                                                                value: 'roles',
                                                                name: 'roles',
                                                                description: 'Quicky assign permission sets',
                                                            },
                                                            {
                                                                media: <Icon value={IconName.Settings} variant="basic" />,
                                                                label: 'Individual',
                                                                value: 'individual',
                                                                name: 'individual',
                                                                description: 'Set up specific permissions',
                                                            },
                                                            {
                                                                media: <Icon value={IconName.Lock} variant="basic" />,
                                                                label: 'No permissons',
                                                                value: 'no-permissons',
                                                                name: 'no-permissons',
                                                                description: 'No access',
                                                            },
                                                        ];
                                                        
                                                        const CheckboxSelectionCardGroup = () => {
                                                            const [selected, setSelected] = useState<string[]>([]);
                                                        
                                                            return (
                                                                <SelectionCardGroup
                                                                    helper="Helper text"
                                                                    label="Label"
                                                                    variant="vertical"
                                                                    inputValue={selected}
                                                                    onChange={(_, value) => setSelected(value)}
                                                                    templateColumns={args.variant === 'vertical' ? 'repeat(4, 1fr);' : '1fr'}
                                                                    type="checkbox"
                                                                    options={options}
                                                                />
                                                            );
                                                        };
                                                        
                                                            

Storybook

Open example in our Storybook

Storybook failed to load. Please connect to the VPN to access.

API

SelectionCardGroup

Name

Description

Type

Default

options

Defines the options for the cards

Array<Option>

undefined

variant?

Defines the variant for the group

Direction

'horizontal'

disabled?

Defines if the group is disabled

boolean

false

type

Defines the type for the group

Direction

undefined

onChange

Callback for Card select event

(e: React.ChangeEvent<HTMLInputElement>, value: string) => void | (e: React.SyntheticEvent<HTMLElement>, value: string[]) => void

-

inputValue

Defines the value for the input

string | string[]

undefined

label

Render the label for the group

React.ReactNode

undefined

helper?

Render the helper for the group

React.ReactNode

undefined

error?

Render the error message for the group

React.ReactNode

undefined

required?

Defines if the group is required

boolean

undefined

captionIconWithTooltip?

Renders the action icon with tooltip for the group

React.ReactNode

undefined

cornerRadius?

Defines the corner radius for the group

'small' | 'medium'

'small'

showSelector?

Defines if the selectors for the group are visible

boolean

true

Option

Name

Description

Type

Default

checked?

Defines if the card is checked

boolean

undefined

description?

Renders the description for the card

React.ReactNode

undefined

disabled?

Defines if the card is disabled

boolean

undefined

media?

Renders the leading media element in the card

React.ReactNode

undefined

label

Renders the label of the card

React.ReactNode

undefined

value

Defines the value of the card

string

undefined

name?

Defines the name of the card

string

undefined

dataTestId?

Defines the data test id of the card

string

undefined

cornerRadius?

Defines the cornes radius of the card

'small' | 'medium'

undefined

showSelector?

Defines if the selector is visible

boolean

undefined