Skip to content

Switch

Basic Usage

import { Switch } from "@ronin-nexus/atomic";
 
<Switch />;
 
<Switch checked />;
 
<FlexRow as="label">
  <Switch />
  <span>Check me senpai</span>
</FlexRow>;

Switch Props

Follow the radix component's props Switch

Switch with Label

<FlexRow as="label" className="gap-1 overflow-hidden items-center">
  <Switch />
  <span>Click me senpai</span>
</FlexRow>

Custom Switch Thumb

<FlexRow as="label" className="gap-1 overflow-hidden items-center">
  <Switch
    thumb={() => {
      <!-- Handle logic change thumb icon here -->
      return <Sun />
    }}
  />
  <span>Click me senpai</span>
</FlexRow>

Disabled

Size

Type: xs (24 x 12) | sm (40 x 20) | base (48 x 24)

Default: base