Skip to Content
ComponentsSwitch

Switch

Control to allow toggling between checked and not checked state.

Source

#

Documentation

#

Usage

import { Switch } from "@optiaxiom/react";
 
export function App() {
  return <Switch>Label</Switch>;
}

#

Label

The children prop is used as the label of the switch control.

import { Group, Separator, Switch } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group gap="16">
      <Switch>Label</Switch>
      <Separator orientation="vertical" />
      <Switch />
    </Group>
  );
}

#

Description

Use the description prop to add helper text after the label.

import { Group, Switch } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group flexDirection="column" gap="16">
      <Switch description="Receive notifications for new messages and updates">
        Push notifications
      </Switch>
      <Switch description="Allow us to collect anonymous usage data">
        Analytics
      </Switch>
    </Group>
  );
}

#

Error state

Wrap Switch in a Field component and use the error prop to display validation errors.

"use client";
 
import { Field, Switch } from "@optiaxiom/react";
 
export function App() {
  return (
    <Field error="You must accept the terms to continue">
      <Switch>I accept the terms and conditions</Switch>
    </Field>
  );
}

#

Controlled

Use the checked and defaultChecked props to toggle between controlled and uncontrolled usage. And combine it with onCheckedChange to listen for changes to the state.

"use client";
 
import { Button, Group, Switch } from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [value, setValue] = useState(false);
 
  return (
    <Group gap="16">
      <Switch checked={value} onCheckedChange={setValue}>
        Label
      </Switch>
      <Button disabled={!value} onClick={() => setValue(false)}>
        Reset
      </Button>
    </Group>
  );
}

#

Form integration

Integrate with form libraries like react-hook-form for validation and error handling.

"use client";
 
import { Button, Field, Group, Input, Switch } from "@optiaxiom/react";
import { useForm } from "react-hook-form";
 
export function App() {
  const {
    formState: { errors },
    handleSubmit,
    register,
  } = useForm<{
    emailNotifications: boolean;
    smsNotifications: boolean;
    username: string;
  }>({
    defaultValues: {
      emailNotifications: true,
      smsNotifications: false,
    },
  });
 
  return (
    <form
      noValidate
      onSubmit={handleSubmit((data) => {
        console.log(data);
      })}
    >
      <Group flexDirection="column" gap="16">
        <Field error={errors.username?.message} label="Username" required>
          <Input
            placeholder="Enter username"
            {...register("username", {
              required: "Username is required",
            })}
          />
        </Field>
 
        <Switch {...register("emailNotifications")}>Email notifications</Switch>
 
        <Switch {...register("smsNotifications")}>SMS notifications</Switch>
 
        <Button alignSelf="start" type="submit">
          Save settings
        </Button>
      </Group>
    </form>
  );
}

#

Sizes

Use the size prop to control the size of the switch control.

"use client";
 
import type { ComponentPropsWithRef } from "react";
 
import { Switch } from "@optiaxiom/react";
 
export function App({
  size,
}: Pick<ComponentPropsWithRef<typeof Switch>, "size">) {
  return <Switch size={size}>Label</Switch>;
}

#

Disabled state

Enable the disabled prop to toggle the disabled state of the input field.

import { Group, Switch } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group gap="16">
      <Switch defaultChecked disabled>
        Label
      </Switch>
      <Switch disabled>Label</Switch>
    </Group>
  );
}

#

Related

Checkbox

Basic control to allow selecting one or more items from a set.

RadioGroup

Basic control to allow selecting only one item from a set.

#

Props

#

Switch

Supports all Box props in addition to its own. Renders a <div> element but forwards all props to a hidden <input> element.

Prop

asChild

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read the Composition guide for more details.

false | true

children

ReactNode

className

string

description

Add secondary text after the label.

ReactNode

name

The name of the form control element.

string

onCheckedChange

Handler that is called when the checked state changes.

(checked: boolean) => void

required

Whether selecting this input is required.

false | true

size

Control the size of the switch.

"md" | "lg"

Default: md

value

The value of the form control element.

string | number | readonly string[]

#

Accessibility

#

Keyboard interactions

Key

Description

Space

Toggles the switch between on and off

Enter

Toggles the switch between on and off

Tab

Moves focus to or away from the switch

Shift + Tab

Moves focus to the previous focusable element

Switch automatically handles accessibility:

  • Uses proper role="switch" and ARIA attributes
  • Supports aria-checked for on/off states
  • Associates label text with the switch control

#

Changelog

#

0.1.0

  • Added component
Last updated on
SpinnerTable