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>
  );
}

#
Props

#
`Switch`

Supports all Box props in addition to its own.

Name	Type
asChild	`false \| true`
checked	`false \| true`
defaultChecked	`false \| true`
description	`ReactNode`
onCheckedChange	`(checked: boolean) => void`
required	`false \| true`
size	`"md" \| "lg"` = `"md"`

#
Changelog

#
0.1.0

Added component

SearchInput Textarea