switch.mdx

import { ComponentLinks, InteractiveCodeblock, PropsTable, Codeblock, } from "@/components/index";

Switch

Switch component is same as the Switch component but used separately & used to toggle a single value.

Imports

import {
  Switch,
  SwitchDescription,
  SwitchIcon,
  SwitchInput,
  SwitchLabel,
  useSwitchProps,
  useSwitchState,
  SwitchText,
} from "@adaptui/react-tailwind";

<Nextra.Callout> A complex component that supports customization as per the composition guide. </Nextra.Callout>

Usage

<InteractiveCodeblock children={({ spreadProps }) => <Switch ${spreadProps}>Label text</Switch>} booleanProps={["disabled"]} themeProps={{ size: "switch.size" }} />

Switch sizes

Sizes can be set using the size prop. The default size is md. The available sizes are: sm md lg

<Codeblock live code={`

`} />

Switch Uncontrolled

Uncontrolled switch can be used with defaultState prop.

<Codeblock live code={`

`} />

Switch UI states

<Codeblock live code={`

`} />

Switch Disabled states

<Codeblock live code={`

`} />

API Reference

<PropsTable data={[ { name: "size", themeKey: "switch.size", default: "md" }, { name: "disabled", type: "boolean", description: "If true, the Switch will be disabled.", default: "false", }, { name: "isChecked", type: "boolean", description: "If true, Switch is checked.", default: "false", }, { name: "label", type: "React.ReactNode", description: "Label for the Switch.", }, { name: "description", type: "React.ReactNode", description: "Description for the Switch.", }, { name: "icon", type: "React.ReactNode", description: "Provide custom icons as a replacement for the default ones.", },

]} />