Skip to component
GGamma

Switch

A labeled on/off control for immediate settings.

Stable
Live previewUse keyboard to interact

Implementation

1"use client";2import { useId, useState, type HTMLAttributes } from "react";3 4export interface GammaSwitchProps extends Omit<5  HTMLAttributes<HTMLLabelElement>,6  "onChange" | "defaultValue"7> {8  /** Text that names what the switch controls. */9  label?: string;10  /** Supporting text under the label. */11  description?: string;12  /** Initial state for uncontrolled use. */13  defaultChecked?: boolean;14  /** Controlled state. Pair with onChange. */15  checked?: boolean;16  /** Called with the next state when the switch is toggled. */17  onChange?: (checked: boolean) => void;18  /** A disabled switch cannot be toggled. */19  disabled?: boolean;20  /** Control density. */21  size?: "sm" | "md";22}23 24/**25 * A labelled on/off control.26 *27 * The native checkbox owns the interaction: Space toggles it, the browser28 * reports the state, and the visible track follows. Pass checked with