> ## Documentation Index
> Fetch the complete documentation index at: https://araf.badr.co.id/llms.txt
> Use this file to discover all available pages before exploring further.
# Toggle
> A pressable button that maintains an on/off state — used for view switching, text formatting, and filter activation.
## Overview
Single toggle
Toggle group
**Toggle** is a pressable button that maintains a pressed/active state. Unlike **Switch** (which is for binary settings), Toggle is used for actions: formatting (bold/italic), view switching (grid/list), and filter activation.
Use `ToggleGroup` when toggles are related and should behave as a group — either `"single"` (radio-like) or `"multiple"` (checkbox-like). Use standalone `Toggle` for independent on/off states.
***
## Installation
```bash npm theme={null}
npm install @araf-ds/core
```
```bash yarn theme={null}
yarn add @araf-ds/core
```
```bash pnpm theme={null}
pnpm add @araf-ds/core
```
***
## Usage
```tsx theme={null}
import { Toggle, ToggleGroup, ToggleGroupItem } from "@araf-ds/core"
export default function Example() {
return (
)
}
```
***
## Variants
### Single Toggle (Icon Only)
Off → On
```tsx theme={null}
```
### With Label
Off → On
```tsx theme={null}
Grid view
```
### Toggle Group — Single Select
One item can be active at a time (radio-like behavior).
```tsx theme={null}
Grid
List
Table
```
### Toggle Group — Multi Select (Text Formatting)
Multiple items can be active simultaneously (checkbox-like behavior).