Toggle

Basic

Loading...

function Demo() {
  const [openNotify, setOpenNotify] = useState(false)
  return (
    <CToggle
      value={openNotify}
      onChange={setOpenNotify}
      label={openNotify ? 'Click to off' : 'Click to on'}
    />
  )
}

Fold/Expand Code

Sizes

Loading...

function Demo() {
  const [toggleStatus, setToggleStatus] = useState({
    xs: false,
    sm: false,
    md: false,
    lg: false,
    xl: false,
  })

  return (
    <>
      <div className="c-row c-items-center c-gutter-x-md">
        {Object.keys(toggleStatus).map(size => (
          <div key={size} className="">
            <CToggle
              size={size}
              value={toggleStatus[size]}
              onChange={v => setToggleStatus({ ...toggleStatus, [size]: v })}
              label={size}
            />
            <p>Is on：{toggleStatus[size] ? 'true' : 'false'}</p>
          </div>
        ))}
      </div>
    </>
  )
}

Fold/Expand Code

Disabled

Loading...

function Demo() {
  return (
    <SpaceItems>
      <CToggle value={false} disabled label="Disabled off" />
      <CToggle value={true} disabled label="Disabled on" />
    </SpaceItems>
  )
}

Fold/Expand Code

Props

Name (*for required)	Description	Type	Default Value

No Data