Switch

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

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

💡

A complex component that supports customization as per the composition guide.

Usage

<Switch >Label text</Switch>

<Switch >Label text</Switch>

Disabled

Switch sizes

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

<div className="inline-flex flex-col space-y-2">
  <Switch size="sm" defaultState={false} />
  <Switch size="md" defaultState={false} />
  <Switch size="lg" defaultState={false} />
</div>

<div className="inline-flex flex-col space-y-2">
  <Switch size="sm" defaultState={false} />
  <Switch size="md" defaultState={false} />
  <Switch size="lg" defaultState={false} />
</div>

Switch Uncontrolled

Uncontrolled switch can be used with defaultState prop.

<div className="inline-flex flex-col space-y-2">
  <Switch size="md" defaultState={true} />
  <Switch size="md" defaultState={false} />
</div>

<div className="inline-flex flex-col space-y-2">
  <Switch size="md" defaultState={true} />
  <Switch size="md" defaultState={false} />
</div>

Switch UI states

<div className="inline-flex flex-col space-y-2 w-72">
  <Switch size="md" defaultState={false} label="Switch" />
  <Switch size="md" defaultState={false} label="Multilined label Switch, just for demonstration" />
  <Switch size="md" defaultState={false} label="Switch" description="Used when the switch is selected and will use its value for the form submission."/>
</div>

<div className="inline-flex flex-col space-y-2 w-72">
  <Switch size="md" defaultState={false} label="Switch" />
  <Switch size="md" defaultState={false} label="Multilined label Switch, just for demonstration" />
  <Switch size="md" defaultState={false} label="Switch" description="Used when the switch is selected and will use its value for the form submission."/>
</div>

Switch Disabled states

<div className="flex flex-col space-y-2 w-72">
  <Switch size="md" disabled defaultState={false} />
  <Switch size="md" disabled defaultState={false} label="Switchs" />
  <Switch size="md" disabled defaultState={false} label="Used when the switch is selected and will use its value for the form submission." />
  <Switch size="md" disabled defaultState={false} label="Switchs" description="Used when the switch is selected and will use its value for the form submission."/>
</div>

<div className="flex flex-col space-y-2 w-72">
  <Switch size="md" disabled defaultState={false} />
  <Switch size="md" disabled defaultState={false} label="Switchs" />
  <Switch size="md" disabled defaultState={false} label="Used when the switch is selected and will use its value for the form submission." />
  <Switch size="md" disabled defaultState={false} label="Switchs" description="Used when the switch is selected and will use its value for the form submission."/>
</div>

API Reference

Prop	Type	Default
`size`	`union`	`md`
`disabled`	`boolean`	`false`
`isChecked`	`boolean`	`false`
`label`	`React.ReactNode`	-
`description`	`React.ReactNode`	-
`icon`	`React.ReactNode`	-

Last updated on June 8, 2023

Switch

Imports#

Usage#

Switch sizes#

Switch Uncontrolled#

Switch UI states#

Switch Disabled states#

API Reference#

Imports