Switch

A control that allows the user to toggle between checked and not checked.

Preview

Airplane Mode

Code

import Label from '@dinui/react/label'
import Switch from '@dinui/react/switch'

export default function SwitchDemo() {
  return (
    <div className="flex items-center space-x-2">
      <Switch id="airplane-mode" />
      <Label htmlFor="airplane-mode">Airplane Mode</Label>
    </div>
  )
}

Form

Preview

Email Notifications

Marketing emails

Receive emails about new products, features, and more.

Security emails

Receive emails about your account security.

Submit

Code

'use client'

import Button from '@dinui/react/button'
import Form, { useForm } from '@dinui/react/form'
import Switch from '@dinui/react/switch'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'

const FormSchema = z.object({
  marketing_emails: z.boolean().default(false).optional(),
  security_emails: z.boolean(),
})

export default function SwitchForm() {
  const form = useForm<z.infer<typeof FormSchema>>({
    resolver: zodResolver(FormSchema),
    defaultValues: {
      security_emails: true,
    },
  })

  function onSubmit(data: z.infer<typeof FormSchema>) {
    alert(`You submitted the following values: ${JSON.stringify(data, null, 2)}`)
  }

  return (
    <Form form={form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="w-full space-y-6">
        <div>
          <h3 className="mb-4 text-lg font-medium">Email Notifications</h3>
          <div className="space-y-4">
            <Form.Field
              control={form.control}
              name="marketing_emails"
              render={({ field }) => (
                <Form.Item className="flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
                  <div className="space-y-0.5">
                    <Form.Label>Marketing emails</Form.Label>
                    <Form.Description>
                      Receive emails about new products, features, and more.
                    </Form.Description>
                  </div>
                  <Form.Control>
                    <Switch checked={field.value} onCheckedChange={field.onChange} />
                  </Form.Control>
                </Form.Item>
              )}
            />
            <Form.Field
              control={form.control}
              name="security_emails"
              render={({ field }) => (
                <Form.Item className="flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
                  <div className="space-y-0.5">
                    <Form.Label>Security emails</Form.Label>
                    <Form.Description>Receive emails about your account security.</Form.Description>
                  </div>

                  <Form.Control>
                    <Switch
                      checked={field.value}
                      onCheckedChange={field.onChange}
                      disabled
                      aria-readonly
                    />
                  </Form.Control>
                </Form.Item>
              )}
            />
          </div>
        </div>

        <Button type="submit">Submit</Button>
      </form>
    </Form>
  )
}

Installation

Default

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. All done

   You now can start using this component in your project.

CLI

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Run the following command in your project

   npm

   npx @dinui/cli@latest add switch

   yarn

   yarn dlx @dinui/cli@latest add switch

   pnpm

   pnpm dlx @dinui/cli@latest add switch

   bun

   bunx @dinui/cli@latest add switch

3. Update the import paths to match your project setup

4. All done

   You now can start using this component in your project.

Manual

1. Follow Installation Guide

   To enable DinUI functionality in your project, you will need to properly set up Tailwind and install the necessary dependencies.

2. Install dependencies

   npm

   npm install @radix-ui/react-switch tailwind-variants type-fest

   yarn

   yarn add @radix-ui/react-switch tailwind-variants type-fest

   pnpm

   pnpm add @radix-ui/react-switch tailwind-variants type-fest

   bun

   bun add @radix-ui/react-switch tailwind-variants type-fest

3. Copy and paste the following code into your project

   'use client'
   
   import * as SwitchPrimitives from '@radix-ui/react-switch'
   import type React from 'react'
   import { forwardRef } from 'react'
   import { tv } from 'tailwind-variants'
   import type { Merge } from 'type-fest'
   
   const switchVariant = tv({
     slots: {
       root: [
         'peer transition-colors',
         'inline-flex h-5 w-9 shrink-0 cursor-pointer items-center',
         'rounded-full border-2 border-transparent shadow-sm',
         'disabled:cursor-not-allowed disabled:opacity-50',
         'data-[state=checked]:bg-brand data-[state=unchecked]:bg-bg--muted',
       ],
       thumb: [
         'transition-transform',
         'block size-4 rounded-full bg-bg--contrast shadow-lg',
         'data-[state=checked]:translate-x-4 data-[state=checked]:bg-fg',
         'data-[state=unchecked]:translate-x-0',
       ],
     },
   })
   
   const Switch = forwardRef<
     React.ElementRef<typeof SwitchPrimitives.Root>,
     Merge<
       React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>,
       {
         thumbProps?: React.ComponentProps<typeof SwitchPrimitives.Thumb>
       }
     >
   >(({ thumbProps, ...props }, ref) => {
     const { root, thumb } = switchVariant()
   
     return (
       <SwitchPrimitives.Root {...props} ref={ref} className={root({ className: props.className })}>
         <SwitchPrimitives.Thumb
           {...thumbProps}
           className={thumb({ className: thumbProps?.className })}
         />
       </SwitchPrimitives.Root>
     )
   })
   Switch.displayName = SwitchPrimitives.Root.displayName
   
   export default Switch
   export { switchVariant, SwitchPrimitives }

4. Update the import paths to match your project setup

5. All done

   You now can start using this component in your project.