Overview

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

Preview

Code

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Form } from '@inpulse-ui/form';
import { Switch } from '@inpulse-ui/switch';

const schema = z.object({
  field: z.boolean().default(false).optional(),
});

export function Demo() {
  const methods = useForm({ resolver: zodResolver(schema) });
  return (
    <Form {...methods}>
      <Switch name="field" />
    </Form>
  );
}

About

This component is an expansion of the Switch developed and maintained by Radix UI.

Installation

pnpm

pnpm add @inpulse-ui/switch

bun

bun add @inpulse-ui/switch

yarn

yarn add @inpulse-ui/switch

npm

npm install @inpulse-ui/switch

API Reference

Root

Contains all the parts of a switch. An input will also render when used within a form to ensure events propagate correctly.

Prop	Type	Default Value	Required
asChild	boolean	false	No
defaultChecked	boolean	false	No
checked	boolean	-	No
disabled	boolean	-	No
mono	boolean	false	No
name	string	-	Yes
required	boolean	-	No
onChange	function	-	No
value	string	on	No

Attribute	Value
[data-state]	checkedunchecked
[data-disabled]	Present when disabled

Thumb

The thumb that is used to visually indicate whether the switch is on or off.

Prop	Type	Default Value	Required
asChild	boolean	false	No

Attribute	Value
[data-state]	checkedunchecked
[data-disabled]	Present when disabled

Usage

Instantiate the component within a form context and set an appropriate name attribute, otherwise it won’t be rendered. The name attribute must be unique within the form for proper functionality.

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

<Form {...useFormProps}>
  <Switch name="field" />
</Form>

Examples

Standard value

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

Preview

Code

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Form } from '@inpulse-ui/form';
import { Switch } from '@inpulse-ui/switch';

const schema = z.object({
  field: z.boolean().default(false).optional(),
});

export function Demo() {
  const methods = useForm({ resolver: zodResolver(schema) });
  return (
    <Form {...methods}>
      <Switch name="field" defaultChecked />
    </Form>
  );
}

Colors

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

Preview

Code

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Form } from '@inpulse-ui/form';
import { Switch } from '@inpulse-ui/switch';

const schema = z.object({
  field: z.boolean().default(false).optional(),
});

export function Demo() {
  const methods = useForm({ resolver: zodResolver(schema) });
  return (
    <Form {...methods}>
      <Switch name="field" className="data-[state=checked]:bg-green-500" />
    </Form>
  );
}

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.

Preview

Code

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Form } from '@inpulse-ui/form';
import { Switch } from '@inpulse-ui/switch';

const schema = z.object({
  field: z.boolean().default(false).optional(),
});

export function Demo() {
  const methods = useForm({ resolver: zodResolver(schema) });
  return (
    <Form {...methods}>
      <Switch name="field" mono />
    </Form>
  );
}

Usage with Label

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

Preview

Code

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Form } from '@inpulse-ui/form';
import { Label } from '@inpulse-ui/label';
import { Switch } from '@inpulse-ui/switch';

const schema = z.object({
  field: z.boolean().default(false).optional(),
});

export function Demo() {
  const methods = useForm({ resolver: zodResolver(schema) });
  return (
    <Form {...methods}>
      <Label for="field">Airplane Mode</Label>
      <Switch name="field" />
    </Form>
  );
}

Events

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

Preview

Code

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Form } from '@inpulse-ui/form';
import { Switch } from '@inpulse-ui/switch';

const schema = z.object({
  field: z.boolean().default(false).optional(),
});

export function Demo() {
  const methods = useForm({ resolver: zodResolver(schema) });
  return (
    <Form {...methods}>
      <Switch name="field" onChange={(checked) => console.log(checked)} />
    </Form>
  );
}