ComponentsSwitch

Switch

Control to allow toggling between checked and not checked state.

#

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 { Flex, Separator, Switch } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex flexDirection="row">
      <Switch>Label</Switch>
      <Separator orientation="vertical" />
      <Switch />
    </Flex>
  );
}

#

Sizes

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

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 { Flex, Switch } from "@optiaxiom/react";
 
export function App() {
  return (
    <Flex flexDirection="row">
      <Switch defaultChecked disabled>
        Label
      </Switch>
      <Switch disabled>Label</Switch>
    </Flex>
  );
}

#

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.

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

#

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

className

string

description

Add helper text after the label.

ReactNode

onCheckedChange

(checked: boolean) => void

size

Control the size of the switch.

"md" | "lg"

Default: md

#

Changelog

#

0.1.0

  • Added component
Spinner
Table ALPHA