Toggle

Disabled

<script lang="ts">
  let on = false
  let on2 = true
</script>

<CToggle bind:value={on} label="Disabled uncheck" disabled />
<CToggle bind:value={on2} label="Disabled checked" disabled />
<script lang="ts">
  let on = false
  let on2 = true
</script>

<CToggle bind:value={on} label="Disabled uncheck" disabled />
<CToggle bind:value={on2} label="Disabled checked" disabled />
svelte
Click fold/expand code

Sizes

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

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

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

CToggle Props

  • label
    string
    default:

    The toggle label text. It is recommended to use bind:value.

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

    The size of toggle. Notice that the default value is 'md' instead of undefined

  • value
    any
    default: false

    The current value of toggle.

  • checkedValue
    any
    default: true

    The value passed to value prop when the toggle is on.

  • uncheckValue
    any
    default: false

    The value passed to value prop when the toggle is off.

  • disabled
    boolean
    default: false

    Determine whether the toggle is dislabed or not.

CToggle Events

No data

CToggle Slots

No data

CToggle Exports

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