The RhToggle is a component that provides a toggle switch for selecting between two options. The component is designed to be flexible and customizable, with support for different styles and animations.
Once installed, you can import the RhToggle component into your React application:
import {RhToggle} from "@rhythm-ui/react"
Then, you can use the RhToggle component in your JSX code:
<RhToggle inset={false} />
Name | Type | Default | Description |
|---|---|---|---|
| inset | boolean | false | Show inset variant of toggle |
| ref | Ref<HTMLInputElement> | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom | |
| key | Key |
The RhToggle component will be displayed with an inset style, which features a subtle gradient background and rounded corners. When set to false or omitted, the component will be displayed with a default style.
<RhToggle inset={true} />