Switch

An element that allows you to toggle the Boolean value of a field.

Installation

pnpm add @inpulse-ds/switch

Usage

This component needs to be in the context of a form to be rendered. Make sure it is applied this way.

import { useForm } from "react-hook-form";
import { Form } from '@inpulse-ds/form';
import { Switch } from '@inpulse-ds/switch';
 
const methods = useForm();
 
export function Demo() {
  return (
    <Form methods={methods}>
      <Switch name="switch" />
    </Form>
  );
}

API

Examples

Standard value

Use the defaultChecked property to set the default value of the Switch when it is rendered.

Colors

By default, the Switch will receive the theme's primary color when activated. But you can customize this color through CSS classes.

Adopt a monochrome style for the Switch by setting the mono property to true. This style will adapt to the system's light and dark mode.

Usage with Label

A Label applied immediately before or after a Switch, can trigger it.

Events

Use the onChange event to perform an action every time the value of the Radio is changed.