Pikas UI

@pikas-ui/switch

This package contains a switch component that can be used to toggle between two states.

This library is based on Radix Ui.

Change Log

To use this package, you must install the @pikas-ui/styles package.

You can install this package using npm, yarn, or pnpm.

npm install @pikas-ui/switch

yarn add @pikas-ui/switch

pnpm add @pikas-ui/switch

The switch component is used to toggle between two states.

Switch label

import { Switch } from '@pikas-ui/switch';

const Example: React.FC = () => {
  return <Switch label="Switch label" id="switch" />;
};

Props extends ButtonHTMLAttributes<HTMLButtonElement>

Prop	Description	Type	Default
`id`	The id of the switch.	`string`	`-`
`label`	The label of the switch.	`string` or `ReactNode`	`-`
`name`	The name of the switch.	`string`	`-`
`fontSize`	The font size of the switch.	`string`	`-`
`textError`	The text error of the switch.	`string`	`-`
`onCheckedChange`	The callback function when the switch is changed.	`(val: boolean) => void`	`-`
`defaultChecked`	The default checked value of the switch.	`boolean`	`false`
`css`	The css of the switch.	`SwitchCSS`	`-`
`disabled`	The disabled value of the switch.	`boolean`	`false`
`side`	The side of the switch.	`"left' or 'right"`	`"left"`
`Icons`	The icons of the switch.	`{ checked: FC<IconProps>, unchecked: FC<IconProps> }`	`-`

This documentation can be edited on GitHub here