A control that allows the user to toggle between checked and not checked.It is used as an alternative for the checkbox component.

This component is made on top of Radix UIs Switch Component with our styling conventions. This component has been shared with you, ensuring that all its native properties are accessible.

Anatomy

Import the component.

import { Switch } from "@rafty/ui";

<Switch />;

Usage

<Switch />

Size

There are 3 size options in spinner: sm, md (default) & `lg

<div className="flex items-center gap-4">
  <Switch size="sm" />
  <Switch size="md" />
  <Switch size="lg" />
</div>

IsDisabled

isDisabled prop is used to show select component in disabled state.

<Switch isDisabled />

Checked

Pass the checked prop is used to manage checked state.

<Switch checked />

IsRequired

IsRequired prop is used to show select in required state.

<Switch
  isRequired
  size="lg"
/>

IsReadOnly

IsReadOnly prop is used to show select in read-only state

<Switch isReadOnly />