Skip to Content
Dashflow Logo

Toggle Component

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

Overview

The Toggle component provides a switch-like control for binary states. It's designed for on/off toggles, settings, and any interface where users need to switch between two states.

Basic Usage

import { Toggle } from '@dashflowx/core'


export default function ToggleExample() {
  return (
    <Toggle />
  )
}

Preview:

Props

PropTypeDefaultDescription
classNamestring''Additional CSS classes
disabledbooleanfalseWhether the toggle is disabled
fullwidthbooleanfalseWhether the toggle takes full width
lablestring'Toggle'Label for the toggle
requiredbooleanfalseWhether the field is required
prefixElementJSX.Element-Element to display before the toggle
sufixElementJSX.Element-Element to display after the toggle
sucessMsgstring-Success message to display
errorMsgstring-Error message to display

Examples

Basic Toggle

import { Toggle } from '@dashflowx/core'


export default function BasicToggle() {
  return (
    <Toggle />
  )
}

Preview:

Custom Styled Toggle

import { Toggle } from '@dashflowx/core'


export default function CustomStyledToggle() {
  return (
    <Toggle className="border border-blue-500 rounded-lg p-4" />
  )
}

Preview:

Toggle with Label

import { Toggle } from '@dashflowx/core'


export default function ToggleWithLabel() {
  return (
    <Toggle lable="Enable notifications" />
  )
}

Preview:

Required Toggle

import { Toggle } from '@dashflowx/core'


export default function RequiredToggle() {
  return (
    <Toggle lable="Accept terms" required={true} />
  )
}

Preview:

Disabled Toggle

import { Toggle } from '@dashflowx/core'


export default function DisabledToggle() {
  return (
    <Toggle lable="Disabled option" disabled={true} />
  )
}

Preview:

Full Width Toggle

import { Toggle } from '@dashflowx/core'


export default function FullWidthToggle() {
  return (
    <Toggle lable="Full width toggle" fullwidth={true} />
  )
}

Preview:

Common Use Cases

Settings Toggle

const settingsToggle = (
  <Toggle lable="Enable dark mode" />
);

Feature Toggle

const featureToggle = (
  <Toggle lable="Enable new features" />
);

Notification Toggle

const notificationToggle = (
  <Toggle lable="Receive email notifications" />
);

Privacy Toggle

const privacyToggle = (
  <Toggle lable="Make profile public" />
);

Best Practices

1. Clear Labels

Use clear and descriptive labels for toggles.

// ✅ Good - Clear labels
<Toggle lable="Enable email notifications" />


// ❌ Avoid - Unclear labels
<Toggle lable="Toggle" />

2. Appropriate States

Use appropriate states for different contexts.

// ✅ Good - Appropriate states
<Toggle lable="Enable feature" />
<Toggle lable="Disable feature" />


// ❌ Avoid - Confusing states
<Toggle lable="Maybe enable" />

3. Consistent Styling

Maintain consistent styling across toggles.

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


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

4. Accessible Labels

Ensure toggle labels are accessible to all users.

// ✅ Good - Accessible labels
<Toggle lable="Enable accessibility features" />


// ❌ Avoid - Not accessible
<Toggle lable="Toggle" />

5. Appropriate Disabled States

Use disabled states appropriately.

// ✅ Good - Appropriate disabled state
<Toggle lable="Feature unavailable" disabled={true} />


// ❌ Avoid - Inappropriate disabled state
<Toggle lable="Available feature" disabled={true} />

Customization

Custom Styling

You can customize the toggle appearance using CSS classes:

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

Different Themes

Use different themes for different contexts:

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


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


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

Size Variations

Use different sizes for different emphasis levels:

// Small toggle
<Toggle className="text-sm" />


// Standard toggle
<Toggle className="text-base" />


// Large toggle
<Toggle className="text-lg" />

Advanced Usage

Dynamic Toggle State

Manage toggle state dynamically:

const [isEnabled, setIsEnabled] = useState(false);


<Toggle 
  lable="Dynamic toggle"
  checked={isEnabled}
  onChange={setIsEnabled}
/>

Toggle with Validation

Add validation to toggle states:

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


<Toggle 
  lable="Required setting"
  required={true}
  errorMsg={hasError ? "This setting is required" : ""}
/>

Toggle with Success Message

Show success messages for toggle actions:

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


<Toggle 
  lable="Feature enabled"
  sucessMsg={showSuccess ? "Feature enabled successfully" : ""}
/>
  • Switch: For similar toggle functionality
  • Checkbox: For checkbox-style toggles
  • Button: For button-style toggles
  • Form: For form containers
  • Label: For form labels

API Reference

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

Edit this page on GitHub
previousDate Picker