Switch

Control to allow toggling between checked and not checked state.

#
Documentation

#
Usage

Label


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.

Label


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.

Label

Size


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.

Label


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.

Label


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