Checkbox

Basic usage

<script lang="ts">
  let checked = false
</script>

<div class="c-flex c-gutter-x-md c-wrap">
  <div>
    <CCheckbox bind:value={checked} label="Agree to our agreement" />
  </div>
  <div>
    <CCheckbox bind:value={checked}>
      <p slot="label">
        Click to our <a
          href="https://github.com/Casual-UI/svelte"
          rel="noreferrer"
          target="_blank">github repository</a
        >
      </p>
    </CCheckbox>
  </div>
</div>
<script lang="ts">
  let checked = false
</script>

<div class="c-flex c-gutter-x-md c-wrap">
  <div>
    <CCheckbox bind:value={checked} label="Agree to our agreement" />
  </div>
  <div>
    <CCheckbox bind:value={checked}>
      <p slot="label">
        Click to our <a
          href="https://github.com/Casual-UI/svelte"
          rel="noreferrer"
          target="_blank">github repository</a
        >
      </p>
    </CCheckbox>
  </div>
</div>
svelte
Click fold/expand code

Disabled

<script lang="ts">
  let checked = false
  let checked2 = true
</script>

<CCheckbox disabled bind:value={checked} label="Disabled (not check)" />
<CCheckbox disabled bind:value={checked2} label="Disabled (checked)" />
<script lang="ts">
  let checked = false
  let checked2 = true
</script>

<CCheckbox disabled bind:value={checked} label="Disabled (not check)" />
<CCheckbox disabled bind:value={checked2} label="Disabled (checked)" />
svelte
Click fold/expand code

Sizes

<script lang="ts">
  let checked = 'md'
</script>

<div class="c-flex c-gutter-x-md c-wrap c-items-center">
  <div>
    <CCheckbox bind:value={checked} label="xs" size="xs" checkedValue="xs" />
  </div>
  <div>
    <CCheckbox bind:value={checked} label="sm" size="sm" checkedValue="sm" />
  </div>
  <div>
    <CCheckbox
      bind:value={checked}
      label="md (default)"
      size="md"
      checkedValue="md"
    />
  </div>
  <div>
    <CCheckbox bind:value={checked} label="lg" size="lg" checkedValue="lg" />
  </div>
  <div>
    <CCheckbox bind:value={checked} label="xl" size="xl" checkedValue="xl" />
  </div>
</div>
<script lang="ts">
  let checked = 'md'
</script>

<div class="c-flex c-gutter-x-md c-wrap c-items-center">
  <div>
    <CCheckbox bind:value={checked} label="xs" size="xs" checkedValue="xs" />
  </div>
  <div>
    <CCheckbox bind:value={checked} label="sm" size="sm" checkedValue="sm" />
  </div>
  <div>
    <CCheckbox
      bind:value={checked}
      label="md (default)"
      size="md"
      checkedValue="md"
    />
  </div>
  <div>
    <CCheckbox bind:value={checked} label="lg" size="lg" checkedValue="lg" />
  </div>
  <div>
    <CCheckbox bind:value={checked} label="xl" size="xl" checkedValue="xl" />
  </div>
</div>
svelte
Click fold/expand code

CCheckbox Props

  • value
    boolean | string | number=
    default: undefined

    Determine whether the checkbox is checked or not. It is recommended to use bind:value.

  • theme
    'primary' | 'secondary' | 'warning' | 'negative'
    default: primary

    The theme color

  • size
    'xs' | 'sm' | 'md' | 'lg' | 'xl'=
    default: undefined

    The size of checkbox.

  • label
    string
    default:

    The text label of checkbox.

  • checkedValue
    boolean | string | number
    default: true

    The checked value pass to value prop when the checkbox is checked.

  • disabled
    boolean
    default: false

    Determine whether the checkbox is disabled or not.

CCheckbox Events

  • change

    Emit when the checked status change.

CCheckbox Slots

  • label

    Customize some label content. Notice that this slot would override the label prop

CCheckbox Exports

No data
Suggest changes to this page
Last update at: 2023/08/13 13:04:55