codefast/ui

Command Palette

Search for a command to run...

Source
Form

Toggle

Pressable button with active/inactive state. Use ToggleGroup for exclusive selection.

Examples

Sizes

sm, default, and lg toggles.

17 lines
import { Toggle } from "@codefast/ui/toggle";

export function ToggleSizes() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle variant="outline" aria-label="Toggle small" size="sm">
        Small
      </Toggle>
      <Toggle variant="outline" aria-label="Toggle default" size="default">
        Default
      </Toggle>
      <Toggle variant="outline" aria-label="Toggle large" size="lg">
        Large
      </Toggle>
    </div>
  );
}

Disabled

A two-state button that can be either on or off.

14 lines
import { Toggle } from "@codefast/ui/toggle";

export function ToggleDisabled() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle aria-label="Toggle disabled" disabled>
        Disabled
      </Toggle>
      <Toggle variant="outline" aria-label="Toggle disabled outline" disabled>
        Disabled
      </Toggle>
    </div>
  );
}

Outline

Use variant='outline' for an outline style.

17 lines
import { Toggle } from "@codefast/ui/toggle";
import { BoldIcon, ItalicIcon } from "lucide-react";

export function ToggleOutline() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle variant="outline" aria-label="Toggle italic">
        <ItalicIcon />
        Italic
      </Toggle>
      <Toggle variant="outline" aria-label="Toggle bold">
        <BoldIcon />
        Bold
      </Toggle>
    </div>
  );
}

RTL

Right-to-left layout support for languages such as Arabic and Hebrew.

Translations are AI-generated for demonstration and may be imperfect.

37 lines
import { Toggle } from "@codefast/ui/toggle";
import { BookmarkIcon } from "lucide-react";

import type { Translations } from "#/features/components-catalog/components/detail/language";
import { useTranslation } from "#/features/components-catalog/components/detail/language-context";

const translations: Translations = {
  en: {
    dir: "ltr",
    values: {
      label: "Bookmark",
    },
  },
  ar: {
    dir: "rtl",
    values: {
      label: "إشارة مرجعية",
    },
  },
  he: {
    dir: "rtl",
    values: {
      label: "סימנייה",
    },
  },
};

export function ToggleRtl() {
  const { dir, t } = useTranslation(translations, "ar");

  return (
    <Toggle aria-label="Toggle bookmark" size="sm" variant="outline" dir={dir}>
      <BookmarkIcon className="group-aria-pressed/toggle:fill-foreground" />
      {t.label}
    </Toggle>
  );
}

With Text

A two-state button that can be either on or off.

11 lines
import { Toggle } from "@codefast/ui/toggle";
import { ItalicIcon } from "lucide-react";

export function ToggleText() {
  return (
    <Toggle aria-label="Toggle italic">
      <ItalicIcon />
      Italic
    </Toggle>
  );
}

Usage

The minimal import and composition — see Examples below for styled, real-world variants.

10 lines
import { Toggle } from "@codefast/ui/toggle";
import { ItalicIcon } from "lucide-react";

export function ToggleUsage() {
  return (
    <Toggle aria-label="Toggle italic">
      <ItalicIcon />
    </Toggle>
  );
}

Anatomy

How the parts nest — every slot the component exposes, in composition order.

Toggle

Features

  • Two variants (default, outline) and three sizes (sm, default, lg).
  • Exposes aria-pressed, reflecting pressed/defaultPressed, so assistive tech announces on/off state, not just the visual style.
  • Group several toggles into one exclusive or multi-select cluster with Toggle Group.

API reference

Props for each part of the component. All native element props are also forwarded.

Toggle

A two-state pressable button.

pressedboolean

The controlled pressed state.

defaultPressedboolean

The pressed state when initially rendered (uncontrolled).

Defaultfalse

onPressedChange(pressed: boolean) => void

Called when the pressed state changes.

variant"default" | "outline"

Visual style.

Default"default"

size"sm" | "default" | "lg"

Button size.

Default"default"

Accessibility

Built to be keyboard-navigable and screen-reader friendly out of the box.

KeyFunction
TabMoves focus to the toggle.
SpaceFlips the pressed state.
EnterFlips the pressed state.
  • Exposes aria-pressed so the on/off state is announced.
  • Icon-only toggles must set an aria-label.
  • Use a Switch instead for a setting that reads as on/off rather than pressed.

Guidelines

Conventions that keep usage consistent across an app.

Do

  • Use for a single independent on/off, like a formatting mark.
  • Group related toggles with Toggle Group.

Don’t

  • Don’t use a Toggle where a Switch or Checkbox fits better.
  • Don’t leave icon toggles unlabelled.

Explore further

Ready to integrate?

Follow the Getting Started guide to install @codefast/ui, or browse the full component gallery.

Getting StartedBrowse all components