React
Is new design vision part implemented using new tokens?
Up to date
Resources
Example
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)}
type="checkbox"
options={options}
/>
);
};
API
SelectionCardGroup
|
Name |
Description |
Type |
Default |
|---|---|---|---|
|
options |
Defines the options for the cards |
Array<Option> |
undefined |
|
cardVariant? |
Defines the variant for the cards in 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 |
|
templateColumns? |
Defines the grid layout for the group |
string |
cardVariant === 'vertical' ? `repeat(${options.length}, 1fr)` : '1fr' |
|
compact? |
Enables the compact mode for the group |
boolean |
false |
|
size? |
Defines the size for the group |
'medium' | 'large' |
‘medium’ |
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 |