@radix-ui/react-switch

What is @radix-ui/react-switch?

@radix-ui/react-switch is a React component library that provides accessible and customizable switch components. These switches can be used to toggle between two states, such as on and off, and are designed to be highly customizable and accessible out of the box.

What are @radix-ui/react-switch's main functionalities?

Basic Switch

This code demonstrates a basic switch component using @radix-ui/react-switch. The Switch.Root component is the container, and the Switch.Thumb component represents the draggable part of the switch.

import * as Switch from '@radix-ui/react-switch';

function BasicSwitch() {
  return (
    <Switch.Root>
      <Switch.Thumb />
    </Switch.Root>
  );
}

Customizable Switch

This code shows how to customize the appearance of the switch by applying custom CSS classes. The 'custom-switch' and 'custom-thumb' classes can be defined in an external CSS file to style the switch and its thumb.

import * as Switch from '@radix-ui/react-switch';
import './switch.css';

function CustomSwitch() {
  return (
    <Switch.Root className="custom-switch">
      <Switch.Thumb className="custom-thumb" />
    </Switch.Root>
  );
}

Controlled Switch

This example demonstrates a controlled switch component where the switch's state is managed by a React useState hook. The 'checked' prop is used to control the switch's state, and the 'onCheckedChange' prop is used to update the state.

import * as Switch from '@radix-ui/react-switch';
import { useState } from 'react';

function ControlledSwitch() {
  const [isChecked, setIsChecked] = useState(false);

  return (
    <Switch.Root checked={isChecked} onCheckedChange={setIsChecked}>
      <Switch.Thumb />
    </Switch.Root>
  );
}

Other packages similar to @radix-ui/react-switch

react-switch

react-switch is a lightweight switch component for React. It provides a simple API for creating toggle switches with customizable styles. Compared to @radix-ui/react-switch, react-switch is more lightweight but may lack some of the advanced accessibility features.

rc-switch

rc-switch is a React component for creating switch controls. It is part of the rc-components library and offers a range of customization options. While it provides similar functionality to @radix-ui/react-switch, it may not be as focused on accessibility.

react-toggle

react-toggle is a React component for creating highly customizable toggle switches. It offers a simple API and supports various customization options. Compared to @radix-ui/react-switch, react-toggle is more focused on providing a wide range of customization options.

README

react-switch

Installation

$ yarn add @radix-ui/react-switch
# or
$ npm install @radix-ui/react-switch

Usage

View docs here.