Core Component

Toggle

Binary switch for on/off states with optional label and description.

Preview

Stream responses

Show AI responses as they generate

Enable tool use

Allow the model to call external tools

Dark mode

Source

Full component implementation using the design system tokens.

tsx

"use client";

import { useState } from "react";

export function DSToggle({
  defaultChecked = false,
  label,
  description,
  onChange,
}: {
  defaultChecked?: boolean;
  label?: string;
  description?: string;
  onChange?: (checked: boolean) => void;
}) {
  const [checked, setChecked] = useState(defaultChecked);

  const toggle = () => {
    const next = !checked;
    setChecked(next);
    onChange?.(next);
  };

  return (
    <div className="flex items-start gap-3">
      <button
        role="switch"
        aria-checked={checked}
        onClick={toggle}
        className={`relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors duration-200 ${
          checked ? "bg-accent" : "bg-overlay/15"
        }`}
      >
        <span
          className={`inline-block h-4 w-4 rounded-full bg-background shadow-sm transition-transform duration-200 ${
            checked ? "translate-x-6" : "translate-x-1"
          }`}
        />
      </button>
      {(label || description) && (
        <div>
          {label && <p className="text-sm font-medium text-foreground">{label}</p>}
          {description && <p className="text-xs text-tertiary mt-0.5">{description}</p>}
        </div>
      )}
    </div>
  );
}

Props

All available props with types and defaults.

Prop	Type	Default	Description
`defaultChecked`	`boolean`	`false`	Initial checked state
`label`	`string`	`—`	Primary label text
`description`	`string`	`—`	Secondary description below the label
`onChange`	`(checked: boolean) => void`	`—`	Callback when toggled

Variants

With label

Toggle with label and description for settings panels.

Stream responses

Show AI responses as they generate

tsx

<DSToggle
  label="Stream responses"
  description="Show AI responses as they generate"
  defaultChecked
/>

Standalone

Compact toggle without label for inline use.

tsx

<DSToggle />

Prompt Guide

Prompt Guide — Toggle

Use for

Feature toggles (streaming, dark mode, sound)
Settings switches (enable/disable capabilities)
Permission controls (allow tool use, allow web search)
Preference flags in AI configuration

Don't use for

Choosing between options — use Tabs or radio buttons
Actions that happen once — use Button
Complex multi-state controls — use a select or dropdown

AI Context

Toggles control binary AI features: 'Stream responses', 'Enable tool use', 'Allow web search', 'Dark mode'. The switch metaphor is instant and clear — on or off, no ambiguity. Use label + description for settings panels. Standalone for compact toolbar switches.