# ToggleGroup

Manages a group of interactive toggle buttons, allowing users to select one or more options.

### **Import**
```tsx
import { ToggleGroup } from '@app-studio/web';
```

### **Default**
```tsx
import React from 'react';
import { ToggleGroup } from '../ToggleGroup';

export const DefaultDemo = () => {
  const items = [
    { id: 'B', value: 'B' },
    { id: 'C', value: 'C' },
    { id: 'D', value: 'D' },
  ];
  return <ToggleGroup items={items} />;
};
```

### **shape**
Optional shape prop to define the shape of toggle elements.

- **Type:** `Shape`
- **Default:** `rounded`
- **Possible Values:** `square, rounded, pill`

```tsx
import React from 'react';
import { DustBinIcon } from '../../Icon/Icon';
import { ToggleGroup } from '../ToggleGroup';
import { Shape } from '../ToggleGroup/ToggleGroup.type';
import { Horizontal } from 'app-studio';
import { View } from 'app-studio';

export const ShapeDemo = () => {
  const items = [
    {
      id: 'item',
      value: <DustBinIcon widthHeight={18} />,
      isActive: true,
    },
  ];
  return (
    <Horizontal gap={15}>
      {['square', 'rounded', 'pill'].map((border, index) => (
        <View position="relative" key={index}>
          <ToggleGroup items={items} shape={border as Shape} />
        </View>
      ))}
    </Horizontal>
  );
};
```

### **items**
Mandatory array of items defining each toggle in the group.

- **Type:** `ToggleItem[]`

```tsx
import React from 'react';
import { ToggleGroup } from '../ToggleGroup';
import { Text } from 'app-studio';

export const ItemsDemo = () => {
  const items = [
    { id: 'B', value: <Text>B</Text> },
    { id: 'C', value: <Text>C</Text> },
    { id: 'D', value: <Text>D</Text> },
  ];
  return <ToggleGroup items={items} />;
};
```

### **variant**
Optional variant prop to specify the visual style of the toggle group.

- **Type:** `Variant`
- **Default:** `ghost`
- **Possible Values:** `outline, link, ghost`

```tsx
import React from 'react';
import { Text } from 'app-studio';
import { ToggleGroup } from '../ToggleGroup';
import { Variant } from '../ToggleGroup/ToggleGroup.type';
import { Vertical } from 'app-studio';

export const VariantDemo = () => {
  const items = [
    { id: 'B', value: <Text>B</Text> },
    { id: 'C', value: <Text>C</Text> },
    { id: 'D', value: <Text>D</Text> },
  ];
  return (
    <Vertical gap={15}>
      {['outline', 'link', 'ghost'].map((variant, index) => (
        <ToggleGroup key={index} items={items} variant={variant as Variant} />
      ))}
    </Vertical>
  );
};
```

### **onToggleChange**
Optional callback function that fires when the active toggle changes, providing the IDs of active toggles.

- **Type:** `(activeIds: string[]) => void`

```tsx
import React, { useState } from 'react';
import { ToggleGroup } from '../ToggleGroup';
import { Text } from 'app-studio';
import { Vertical } from 'app-studio';

export const OnToggleChangeDemo = () => {
  const [newItems, setNewItems] = useState<any>([]);

  const items = [
    { id: 'B', value: <Text>B</Text> },
    { id: 'C', value: <Text>C</Text> },
    { id: 'D', value: <Text>D</Text> },
  ];
  return (
    <Vertical gap={10}>
      <ToggleGroup
        items={items}
        onToggleChange={(items) => setNewItems(items)}
      />
      Selected: {newItems}
    </Vertical>
  );
};
```

### **ColorScheme**

```tsx
import React from 'react';
import { ToggleGroup } from '../ToggleGroup';
import { Vertical } from 'app-studio';
import { Text } from 'app-studio';

export const ColorSchemeDemo = () => {
  const items = [
    { id: 'B', value: <Text>B</Text> },
    { id: 'C', value: <Text>C</Text>, isActive: true },
    { id: 'D', value: <Text>D</Text>, isDisabled: true },
  ];
  return (
    <Vertical gap={10}>
      {[
        'theme-primary',
        'theme-secondary',
        'theme-warning',
        'theme-success',
        'theme-error',
      ].map((color, index) => (
        <ToggleGroup key={index} items={items} />
      ))}
    </Vertical>
  );
};
```

### **Index**

```tsx
export * from './default';
export * from './items';
export * from './onToggleChange';
export * from './shape';
export * from './variant';
```