arkyn

v3.0.1-beta.72

Switch

The Switch component is a toggle switch used for on/off, active/inactive, or enabled/disabled states. It provides an intuitive interface for toggling between two distinct states with clear visual feedback.

tsx

import { Switch } from "@arkyn/components";

Basic usage

Basic usage requires only the mandatory name property.

tsx

<Switch name="basic-switch" />

Sizes

Available sizes are sm, md, and lg, with lg being the default.

tsx

<Switch name="switch-sm" label="Small size" size="sm" />
<Switch name="switch-md" label="Medium size" size="md" />
<Switch name="switch-lg" label="Large size" size="lg" />

Switch with labels

Labels help identify the purpose of the switch and make the clickable area larger.

tsx

<Switch name="terms" label="I accept the terms and conditions" />

Orientation

Switch options can be arranged in a single line or in columns, depending on available space and design preference.

Horizontal

tsx

<Switch name="option1" label="Option 1" orientation="horizontal" />
<Switch name="option2" label="Option 2" orientation="horizontal" />

Horizontal reverse

The "reverse horizontal" orientation is default, it is not necessary to inform it.

tsx

<Switch name="option1" label="Option 1"  />
<Switch name="option2" label="Option 2"  />

Vertical

tsx

<Switch name="option1" label="Option 1" orientation="vertical" />
<Switch name="option2" label="Option 2" orientation="vertical" />

Switch states

The component supports different states, such as disabled and with different default checked values.

Default checked state

tsx

<Switch name="remember-me" label="Remember me" defaultChecked={true} />

Disabled switch

The disabled state prevents any user interaction with the field and prevents data from being submitted through a form.

tsx

<Switch
  name="disabled-unchecked"
  label="Disabled option (unchecked)"
  disabled
/>
<Switch
  name="disabled-checked"
  label="Disabled option (checked)"
  disabled
  defaultChecked
/>

Form Integration

Customizable Forms
For more complex forms, it is recommended to use the Form Provider which offers native integration with all form tools at once.

Custom Values

Configure specific values for the enabled and disabled states using value and unCheckedValue.

tsx

<Switch
  name="theme-switch"
  label="Application theme"
  value="dark"
  unCheckedValue="light"
  defaultChecked={false}
/>
<Switch
  name="subscription-switch"
  label="Premium subscription"
  value="subscribed"
  unCheckedValue="unsubscribed"
  size="md"
/>

onCheck Callback

The onCheck callback is called whenever the switch state changes, receiving the current value.

tsx

const [themeMode, setThemeMode] = useState("light");


const handleThemeChange = (value) => {
  console.log("Theme changed to:", value);
  setThemeMode(value);


  // Apply theme globally
  document.documentElement.setAttribute("data-theme", value);
};


<Switch
  name="app-theme"
  label="Dark theme"
  value="dark"
  unCheckedValue="light"
  onCheck={handleThemeChange}
/>;

Properties

name - string (required) Field name for form manipulation and identification
label - string Label text to be displayed next to the switch
size - "sm" | "md" | "lg" (default: "lg") Switch size variant
defaultChecked - boolean (default: false) Default checked state for uncontrolled use
checked - boolean Controlled state of the switch (used with onCheck)
value - string (default: "checked") Value to be used when the switch is enabled
unCheckedValue - string (default: "") Value to be used when the switch is disabled
onCheck - (value: string) => void Callback function called when state changes, receives current value
orientation - "vertical" | "horizontal" | "horizontalReverse" (default: "vertical") Switch and label orientation
disabled - boolean (default: false) Whether the switch is disabled
className - string Additional CSS classes for styling
id - string Optional unique identifier for the switch
Other properties
All other standard HTML <button> properties are also supported, except children, onChange, defaultValue, onCheck and value which are controlled by the component.

Important Notes

  • The default value for enabled state is "checked" if not specified
  • The default value for disabled state is "" (empty string) if not specified
  • The onCheck callback always receives the current value (value or unCheckedValue)
On this page