Toggle

Examples #

Use checked property

function() {
  const [toggle, setToggle] = React.useState(false)
  const [toggleChecked, setToggleChecked] = React.useState(true)

  return (
    <>
      <Toggle mb="md" checked={toggle} onClick={() => setToggle(!toggle)} />
      <Toggle checked={toggleChecked} onClick={() => setToggleChecked(!toggleChecked)} />
    </>
  )
}
Copy

Disabled #

With the disabled property

function() {
  const [toggle, setToggle] = React.useState(false)
  const [toggleChecked, setToggleChecked] = React.useState(true)

  return (
    <>
      <Toggle mb="md" checked={toggle} onClick={() => setToggle(!toggle)} disabled />
      <Toggle checked={toggleChecked} onClick={() => setToggleChecked(!toggleChecked)} disabled />
    </>
  )
}
Copy

Field #

Examples with Field

function () {
  const [checked, setChecked] = React.useState(false)

  const handleToggle = () => {
    setChecked(!checked)
  }

  return (
    <Field label="Toggle">
      <Toggle checked={checked} onClick={handleToggle} disabled />
    </Field>
  )
}
Copy

Properties #

Packages #

Dependencies #

Peer dependencies #