Switch

A control that can be toggled on or off.

Properties

checked

Installation

Usage

Example

Source Code

"use client";

import React from "react";
import { Switch } from "@/ui/components/Switch";

function SwitchExample() {
  return <Switch checked={false} onCheckedChange={(checked: boolean) => {}} />;
}

export default SwitchExample;

Props

Switch Props

Thumb Props

Prop

Type

Default value

Notes

checked

boolean

—

Checked state of the switch

onCheckedChange

(checked: boolean) => void

—

Handler called when the checked state of the switch changes.

This is a Radix Switch Root component.

Examples

Controlled

Use checked and onCheckedChange props to control the switch state.


View code

Built in Subframe

ProductComponents Theme Templates Docs Pricing

CompanyBlog LinkedIn X / Twitter Github

ResourcesSlack community Help center For agencies For design systems Subframe vs Figma