勾选器

基础使用

Loading...

function Demo() {
  const [val, setVal] = useState(false)

  return (
    <CCheckbox
      checkedValue={true}
      value={val}
      onChange={setVal}
      label="同意协议"
    />
  )
}

折叠/展开 代码

尺寸

Loading...

function Demo() {
  const [val, setVal] = useState('md')

  return (
    <>
      <div className="c-row c-gutter-md c-items-center">
        <CCheckbox
          checkedValue="xs"
          size="xs"
          value={val}
          onChange={setVal}
          label="超小尺寸"
        />
        <CCheckbox
          checkedValue="sm"
          size="sm"
          value={val}
          onChange={setVal}
          label="小尺寸"
        />
        <CCheckbox
          checkedValue="md"
          value={val}
          onChange={setVal}
          label="中等尺寸（默认）"
        />
        <CCheckbox
          checkedValue="lg"
          size="lg"
          value={val}
          onChange={setVal}
          label="大尺寸"
        />
        <CCheckbox
          checkedValue="xl"
          size="xl"
          value={val}
          onChange={setVal}
          label="超大尺寸"
        />
      </div>
      <div>当前值：{val}</div>
    </>
  )
}

折叠/展开 代码

状态

Loading...

function Demo() {
  return (
    <div className="c-row c-gutter-x-md">
      <CCheckbox value={false} label="禁用态" disabled />
      <CCheckbox value={true} label="禁用态" disabled />
    </div>
  )
}

折叠/展开 代码

勾选框组

Loading...

function Demo() {
  const [val, setVal] = useState([])

  const options = [
    { label: '苹果', value: 'Apple' },
    { label: '香蕉', value: 'Banana' },
    { label: '橘子', value: 'Orange' },
    { label: '桃子', value: 'Peach' },
  ]

  return (
    <>
      <CCheckboxGroup
        value={val}
        onChange={setVal}
        options={options}
        className="c-row c-item-center c-gutter-x-md"
      />
      <div>当前值：{val.join('，')}</div>
    </>
  )
}

折叠/展开 代码

Props

名称 (*代表必须)	描述	类型	默认值

No Data

额外类型说明

type CCheckboxModel = boolean | string | number