CoreSegmentedControlGroup

import { useState } from 'react';
import { CoreSegmentedControlGroup, CoreSegmentedControl } from '@featuring-corp/components';

const [selected, setSelected] = useState('0');

<CoreSegmentedControlGroup 
  size="md"
  value={selected}
  onChange={(e, value) => setSelected(value)}
>
  <CoreSegmentedControl selected={selected === '0'} onClick={() => setSelected('0')}>
    Tab1
  </CoreSegmentedControl>
  <CoreSegmentedControl selected={selected === '1'} onClick={() => setSelected('1')}>
    Tab2
  </CoreSegmentedControl>
  <CoreSegmentedControl selected={selected === '2'} onClick={() => setSelected('2')} disabled>
    Tab3 (disabled)
  </CoreSegmentedControl>
  <CoreSegmentedControl selected={selected === '3'} onClick={() => setSelected('3')}>
    Tab4
  </CoreSegmentedControl>
</CoreSegmentedControlGroup>

import { useState } from 'react';
import { CoreSegmentedControlGroup, CoreSegmentedControl } from '@featuring-corp/components';

const [selected, setSelected] = useState<string[]>([]);

const handleChange = (value: string) => {
  if (selected.includes(value)) {
    setSelected(selected.filter((item) => item !== value));
  } else {
    setSelected([...selected, value]);
  }
};

<CoreSegmentedControlGroup 
  size="md"
  multiple
  value={selected}
  onChange={(e, value) => handleChange(value)}
>
  <CoreSegmentedControl selected={selected.includes('0')} onClick={() => handleChange('0')}>
    Tab1
  </CoreSegmentedControl>
  <CoreSegmentedControl selected={selected.includes('1')} onClick={() => handleChange('1')}>
    Tab2
  </CoreSegmentedControl>
  <CoreSegmentedControl selected={selected.includes('2')} onClick={() => handleChange('2')} disabled>
    Tab3 (disabled)
  </CoreSegmentedControl>
  <CoreSegmentedControl selected={selected.includes('3')} onClick={() => handleChange('3')}>
    Tab4
  </CoreSegmentedControl>
</CoreSegmentedControlGroup>

import { useState } from 'react';
import { CoreSegmentedControlGroup, CoreSegmentedControl } from '@featuring-corp/components';

const [selected, setSelected] = useState('0');

// Small
<CoreSegmentedControlGroup 
  size="sm"
  value={selected}
  onChange={(e, value) => setSelected(value)}
>
  <CoreSegmentedControl selected={selected === '0'} onClick={() => setSelected('0')}>
    Tab1
  </CoreSegmentedControl>
  <CoreSegmentedControl selected={selected === '1'} onClick={() => setSelected('1')}>
    Tab2
  </CoreSegmentedControl>
</CoreSegmentedControlGroup>

// Medium
<CoreSegmentedControlGroup 
  size="md"
  value={selected}
  onChange={(e, value) => setSelected(value)}
>
  <CoreSegmentedControl selected={selected === '0'} onClick={() => setSelected('0')}>
    Tab1
  </CoreSegmentedControl>
  <CoreSegmentedControl selected={selected === '1'} onClick={() => setSelected('1')}>
    Tab2
  </CoreSegmentedControl>
</CoreSegmentedControlGroup>

// Large
<CoreSegmentedControlGroup 
  size="lg"
  value={selected}
  onChange={(e, value) => setSelected(value)}
>
  <CoreSegmentedControl selected={selected === '0'} onClick={() => setSelected('0')}>
    Tab1
  </CoreSegmentedControl>
  <CoreSegmentedControl selected={selected === '1'} onClick={() => setSelected('1')}>
    Tab2
  </CoreSegmentedControl>
</CoreSegmentedControlGroup>

import { useState } from 'react';
import { CoreSegmentedControlGroup, CoreSegmentedControl } from '@featuring-corp/components';

const [selected, setSelected] = useState('0');

<CoreSegmentedControlGroup 
  size="md"
  orientation="vertical"
  value={selected}
  onChange={(e, value) => setSelected(value)}
>
  <CoreSegmentedControl selected={selected === '0'} onClick={() => setSelected('0')}>
    Tab1
  </CoreSegmentedControl>
  <CoreSegmentedControl selected={selected === '1'} onClick={() => setSelected('1')}>
    Tab2
  </CoreSegmentedControl>
  <CoreSegmentedControl selected={selected === '2'} onClick={() => setSelected('2')}>
    Tab3
  </CoreSegmentedControl>
</CoreSegmentedControlGroup>