Switch

Content selection and state toggles

Checked label

Anatomy

import { Switch } from "@lualtek/react-components";
 
export default () => {
  return <Switch label="Label 3" />;
};

API Reference

This component extends the radix-ui Switch (opens in a new tab) component, which exposes different props that enables multiple functionalities, and adds the following:

export type SwitchProps = {
  /**
   * Set the size of the switch.
   * @default "regular"
   */
  dimension?: "small" | "regular" | "big";
 
  /**
   * Assign a label to the input. If passed an ID is automatically generated and used internally
   */
  label?: ReactNode;
 
  /**
   * Assign a label to the input when is checked.
   */
  checkedLabel?: ReactNode;
 
  /**
   * Set the position of the label relative to the switch.
   * @default "end"
   */
  labelPosition?: "start" | "end";
};

Slider Textarea