logo
Charcoal

Switch

スイッチとして真偽値を扱う入力コンポーネント

BASIC

import { useState } from 'react'
import { Switch } from '@charcoal-ui/react'

export const ExampleSwitch = () => {
  const [checked, setChecked] = useState(false)
  return (
    <Switch name="switch" checked={checked} onChange={setChecked}>
      checked: {checked.toString()}
    </Switch>
  )
}

disabled

Props

namedescriptiontypedefaultrequired
labelchildrenがない場合はaria-labelとして必須stringYES
nameinput要素のnamestringYES
onChangeチェックの状態が変わった際に呼ばれる関数(checked: boolean) => voidYES
checkedチェック状態booleanfalseNO
disabled無効化booleanfalseNO
valueinput要素のvaluestringNO