Skip to Content
Dashflow Logo

ToggleGroup Component

A comprehensive guide to using the ToggleGroup component with examples, props, and best practices.

Overview

The ToggleGroup component provides a group of toggle buttons that work together. It's designed for selecting between multiple options, filtering, and any interface where users need to choose from a set of related options.

Basic Usage

import { ToggleGroup } from '@dashflowx/core'


export default function ToggleGroupExample() {
  return (
    <ToggleGroup 
      items={[
        { id: '1', title: 'Option 1', value: 'option1' },
        { id: '2', title: 'Option 2', value: 'option2' },
        { id: '3', title: 'Option 3', value: 'option3' }
      ]}
      defaultValue="option1"
    />
  )
}

Preview:

Props

PropTypeDefaultDescription
classNamestring''Additional CSS classes
disabledbooleanfalseWhether the toggle group is disabled
fullwidthbooleanfalseWhether the toggle group takes full width
lablestring'Toggle Group'Label for the toggle group
requiredbooleanfalseWhether the field is required
itemsArray[]Array of toggle items
defaultValuestring''Default selected value
prefixElementJSX.Element-Element to display before the toggle group
sufixElementJSX.Element-Element to display after the toggle group
sucessMsgstring-Success message to display
errorMsgstring-Error message to display

Examples

Basic ToggleGroup

import { ToggleGroup } from '@dashflowx/core'


export default function BasicToggleGroup() {
  return (
    <ToggleGroup 
      items={[
        { id: '1', title: 'Option 1', value: 'option1' },
        { id: '2', title: 'Option 2', value: 'option2' },
        { id: '3', title: 'Option 3', value: 'option3' }
      ]}
      defaultValue="option1"
    />
  )
}

Preview:

Custom Styled ToggleGroup

import { ToggleGroup } from '@dashflowx/core'


export default function CustomStyledToggleGroup() {
  return (
    <ToggleGroup 
      className="border border-blue-500 rounded-lg p-4"
      items={[
        { id: '1', title: 'Option 1', value: 'option1' },
        { id: '2', title: 'Option 2', value: 'option2' },
        { id: '3', title: 'Option 3', value: 'option3' }
      ]}
      defaultValue="option1"
    />
  )
}

Preview:

ToggleGroup with Label

import { ToggleGroup } from '@dashflowx/core'


export default function ToggleGroupWithLabel() {
  return (
    <ToggleGroup 
      lable="Select view"
      items={[
        { id: '1', title: 'Grid', value: 'grid' },
        { id: '2', title: 'List', value: 'list' },
        { id: '3', title: 'Card', value: 'card' }
      ]}
      defaultValue="grid"
    />
  )
}

Preview:

Required ToggleGroup

import { ToggleGroup } from '@dashflowx/core'


export default function RequiredToggleGroup() {
  return (
    <ToggleGroup 
      lable="Choose option"
      required={true}
      items={[
        { id: '1', title: 'Yes', value: 'yes' },
        { id: '2', title: 'No', value: 'no' }
      ]}
      defaultValue="yes"
    />
  )
}

Preview:

Disabled ToggleGroup

import { ToggleGroup } from '@dashflowx/core'


export default function DisabledToggleGroup() {
  return (
    <ToggleGroup 
      lable="Disabled options"
      disabled={true}
      items={[
        { id: '1', title: 'Option 1', value: 'option1' },
        { id: '2', title: 'Option 2', value: 'option2' }
      ]}
      defaultValue="option1"
    />
  )
}

Preview:

Full Width ToggleGroup

import { ToggleGroup } from '@dashflowx/core'


export default function FullWidthToggleGroup() {
  return (
    <ToggleGroup 
      lable="Full width options"
      fullwidth={true}
      items={[
        { id: '1', title: 'Option 1', value: 'option1' },
        { id: '2', title: 'Option 2', value: 'option2' },
        { id: '3', title: 'Option 3', value: 'option3' }
      ]}
      defaultValue="option1"
    />
  )
}

Preview:

Common Use Cases

View Selection

const viewSelection = (
  <ToggleGroup 
    lable="View"
    items={[
      { id: '1', title: 'Grid', value: 'grid' },
      { id: '2', title: 'List', value: 'list' },
      { id: '3', title: 'Card', value: 'card' }
    ]}
    defaultValue="grid"
  />
);

Filter Options

const filterOptions = (
  <ToggleGroup 
    lable="Filter"
    items={[
      { id: '1', title: 'All', value: 'all' },
      { id: '2', title: 'Active', value: 'active' },
      { id: '3', title: 'Inactive', value: 'inactive' }
    ]}
    defaultValue="all"
  />
);

Size Selection

const sizeSelection = (
  <ToggleGroup 
    lable="Size"
    items={[
      { id: '1', title: 'S', value: 'small' },
      { id: '2', title: 'M', value: 'medium' },
      { id: '3', title: 'L', value: 'large' }
    ]}
    defaultValue="medium"
  />
);

Theme Selection

const themeSelection = (
  <ToggleGroup 
    lable="Theme"
    items={[
      { id: '1', title: 'Light', value: 'light' },
      { id: '2', title: 'Dark', value: 'dark' },
      { id: '3', title: 'Auto', value: 'auto' }
    ]}
    defaultValue="light"
  />
);

Best Practices

1. Clear Labels

Use clear and descriptive labels for toggle groups.

// ✅ Good - Clear labels
<ToggleGroup lable="Select view mode" />


// ❌ Avoid - Unclear labels
<ToggleGroup lable="Options" />

2. Appropriate Options

Use appropriate options for different contexts.

// ✅ Good - Appropriate options
<ToggleGroup items={[
  { id: '1', title: 'Grid', value: 'grid' },
  { id: '2', title: 'List', value: 'list' }
]} />


// ❌ Avoid - Inappropriate options
<ToggleGroup items={[
  { id: '1', title: 'Maybe', value: 'maybe' },
  { id: '2', title: 'Sometimes', value: 'sometimes' }
]} />

3. Consistent Styling

Maintain consistent styling across toggle groups.

// ✅ Good - Consistent styling
<ToggleGroup className="standard-toggle-group-style" />


// ❌ Avoid - Inconsistent styling
<ToggleGroup className="random-styles" />

4. Accessible Labels

Ensure toggle group labels are accessible to all users.

// ✅ Good - Accessible labels
<ToggleGroup lable="Select display mode" />


// ❌ Avoid - Not accessible
<ToggleGroup lable="Options" />

5. Appropriate Default Values

Set appropriate default values for toggle groups.

// ✅ Good - Appropriate default
<ToggleGroup defaultValue="grid" />


// ❌ Avoid - Inappropriate default
<ToggleGroup defaultValue="unknown" />

Customization

Custom Styling

You can customize the toggle group appearance using CSS classes:

<ToggleGroup className="border border-gray-300 rounded-lg p-4" />

Different Themes

Use different themes for different contexts:

// Light theme
<ToggleGroup className="bg-white border-gray-200" />


// Dark theme
<ToggleGroup className="bg-gray-900 border-gray-700 text-white" />


// Brand theme
<ToggleGroup className="bg-blue-50 border-blue-200" />

Size Variations

Use different sizes for different emphasis levels:

// Small toggle group
<ToggleGroup className="text-sm" />


// Standard toggle group
<ToggleGroup className="text-base" />


// Large toggle group
<ToggleGroup className="text-lg" />

Advanced Usage

Dynamic Toggle Group Options

Load toggle group options dynamically:

const [options, setOptions] = useState([]);


useEffect(() => {
  // Load options from API
  loadOptions().then(setOptions);
}, []);

Toggle Group with Validation

Add validation to toggle group selections:

const [hasError, setHasError] = useState(false);


<ToggleGroup 
  lable="Required selection"
  required={true}
  errorMsg={hasError ? "Please select an option" : ""}
/>

Toggle Group with Success Message

Show success messages for toggle group selections:

const [showSuccess, setShowSuccess] = useState(false);


<ToggleGroup 
  lable="Selection made"
  sucessMsg={showSuccess ? "Selection saved successfully" : ""}
/>
  • Toggle: For individual toggle buttons
  • Button: For button-style toggles
  • RadioGroup: For radio button groups
  • Form: For form containers
  • Label: For form labels

API Reference

For the complete API reference and advanced usage patterns, see the ToggleGroup API documentation.

Edit this page on GitHub
previousToggle