OptionCardGroup

import { OptionCard, OptionCardGroup } from '@customerio/pluma-components/react';
import { useState } from 'react';

export default function Example() {
	const [value, setValue] = useState('one');

	return <OptionCardGroup
		label="Test option card group"
		value={value}
		onChange={(value) => {
			setValue(value);
		}}
	>
		<OptionCard value="one" title="One" />
		<OptionCard value="two" title="Two" />
		<OptionCard value="three" title="Three" />
	</OptionCardGroup>
}

import { OptionCard, OptionCardGroup } from '@customerio/pluma-components/react';
import { useState } from 'react';

export default function Example() {
	const [value, setValue] = useState(null);

	return <>
		<Box
			as="label"
			id="my_label_id"
			htmlFor="my_group"
		>
			Make a selection
		</Box>
		<OptionCardGroup
			id="my_input"
			ariaLabelledby="my_label_id"
			value={value}
			onChange={(value) => {
				setValue(value);
			}}
		>
			<OptionCard value="one" title="One" />
			<OptionCard value="two" title="Two" />
			<OptionCard value="three" title="Three" />
		</OptionCardGroup>
	</>;
}

import { OptionCard, OptionCardGroup } from '@customerio/pluma-components/react';
import { useState } from 'react';

export default function Example() {
	const [isDisabled, setIsDisabled] = useState(false);
	const [value, setValue] = useState('one');
	return <>		
		<Box as="label" mb="200" display="block">
			<Checkbox
				label="Disable group"
				isChecked={isDisabled}
				onChange={(e) => {
					setIsDisabled(e.currentTarget.checked);
				}}
			/>
		</Box>

		<OptionCardGroup
			label="Test checkbox group"
			isDisabled={isDisabled}
			value={value}
			onChange={(value) => {
				setValue(value);
			}}
		>
			<OptionCard value="one" title="One" isDisabled={false} />
			<OptionCard value="two" title="Two" isDisabled={false} />
			<OptionCard value="three" title="Three" isDisabled={true} />
		</OptionCardGroup>
	</>
}

import { OptionCard, OptionCardGroup } from '@customerio/pluma-components/react';
import { useState } from 'react';

export default function Example() {
	const [values, setValues] = useState(['two']);

	return <OptionCardGroup
		label="Test checkbox option card group"
		inputType="checkbox"
		value={values}
		onChange={(values) => {
			setValues(values);
		}}
	>
		<OptionCard value="one" title="One" />
		<OptionCard value="two" title="Two" />
		<OptionCard value="three" title="Three" />
	</OptionCardGroup>
}

import { OptionCard, OptionCardGroup } from '@customerio/pluma-components/react';
import { useState } from 'react';

export default function Example() {
	const [values, setValues] = useState(['two', 'three']);

	return <OptionCardGroup
		label="Test checkbox option card group"
		inputType="checkbox"
		canSelect={values.length < 2}
		value={values}
		onChange={(values) => {
			setValues(values);
		}}
	>
		<OptionCard value="one" title="One" />
		<OptionCard value="two" title="Two" />
		<OptionCard value="three" title="Three" />
	</OptionCardGroup>
}

import { OptionCard, OptionCardGroup } from '@customerio/pluma-components/react';
import { useState } from 'react';

export default function Example() {
  const [value, setValue] = useState('one');

  return (
    <>
      <OptionCardGroup
        label="Size Example"
        value={value}
        onChange={(value) => {
          setValue(value);
        }}
        size='sm'
      >
        <OptionCard value="one" description="This is the first option" />
        <OptionCard value="two" description="This is the second option" />
        <OptionCard value="three" description="This is the third option" />
      </OptionCardGroup>
    </>
  );
}

import { OptionCard, OptionCardGroup } from '@customerio/pluma-components/react';
import { useState } from 'react';

export default function Example() {
	const [values, setValues] = useState([]);

	return <div style={{maxWidth: 400}}>
			<OptionCardGroup
				label="Test cards"
				inputType="checkbox"
				value={values}
				onChange={(values) => {
					setValues(values);
				}}
				shouldWrapCards={true}
				cardsGap="025"
			>
				{[...new Array(20)].map((_, i) => (
					<OptionCard key={i} value={String(i)} description={'Card ' + i} />
				))}
			</OptionCardGroup>
		</div>

}