Switch

Switch component to render toggle.

Usage

The Switch component can be imported using

import { Switch } from '@tail-kit/tail-kit'

Default Switch

<Switch />

<Switch />

Controlled Switch

function ControlledSwitch() {
  const [checked, setChecked] = React.useState(false)
  return (
    <Switch
      checked={checked}
      onChange={(event) => {
        setChecked(event.target.checked)
      }}
    />
  )
}

function ControlledSwitch() {
  const [checked, setChecked] = React.useState(false)
  return (
    <Switch
      checked={checked}
      onChange={(event) => {
        setChecked(event.target.checked)
      }}
    />
  )
}

Disabled Switch

function DisbaledSwitch() {
  const [disable, setDisable] = React.useState(true)
  return (
    <div className="flex items-center space-x-3">
      <Switch disabled={disable} />
      <Button onClick={() => setDisable(!disable)}>Toggle Disabled</Button>
    </div>
  )
}

function DisbaledSwitch() {
  const [disable, setDisable] = React.useState(true)
  return (
    <div className="flex items-center space-x-3">
      <Switch disabled={disable} />
      <Button onClick={() => setDisable(!disable)}>Toggle Disabled</Button>
    </div>
  )
}

Switch Props

Name	Description	Default Value
checked	whether the switch is on on \| off state `boolean \| undefined`	--
defaultChecked	Property to initialize switch with a particular value `boolean \| undefined`	--
disabled	Disable switch `boolean \| undefined`	--
onChange	function called when the state of switch is changed `((event: ChangeEvent<HTMLInputElement>) => void) \| undefined`	--
className	additional class names `string \| undefined`	--
style	addtional styles `CSSProperties \| undefined`	--

General

Feedback

Data Display

Data Entry

Survey

Navigation

Switch

Usage

Default Switch

Controlled Switch

Disabled Switch

Switch Props