Checkbox

Basic

Loading...

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

  return (
    <CCheckbox
      checkedValue={true}
      value={val}
      onChange={setVal}
      label="Agree to the agreement"
    />
  )
}

Fold/Expand Code

Sizes

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="xs"
        />
        <CCheckbox
          checkedValue="sm"
          size="sm"
          value={val}
          onChange={setVal}
          label="sm"
        />
        <CCheckbox
          checkedValue="md"
          value={val}
          onChange={setVal}
          label="md (default)"
        />
        <CCheckbox
          checkedValue="lg"
          size="lg"
          value={val}
          onChange={setVal}
          label="lg"
        />
        <CCheckbox
          checkedValue="xl"
          size="xl"
          value={val}
          onChange={setVal}
          label="xl"
        />
      </div>
      <div>current value: {val}</div>
    </>
  )
}

Fold/Expand Code

Disabled

Loading...

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

Fold/Expand Code

CheckboxGroup

Loading...

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

  const options = [
    { label: 'Apple', value: 'Apple' },
    { label: 'Banana', value: 'Banana' },
    { label: 'Orange', value: 'Orange' },
    { label: 'Peach', value: 'Peach' },
  ]

  return (
    <>
      <CCheckboxGroup
        value={val}
        onChange={setVal}
        options={options}
        className="c-row c-item-center c-gutter-x-md"
      />
      <div>Current checked values: {val.join(',')}</div>
    </>
  )
}

Fold/Expand Code

Props

Name (*for required)	Description	Type	Default Value

No Data

Additional Types

type CCheckboxModel = boolean | string | number