Checkbox

Default

Add a checkbox type input easily and with a beautiful animation

Code copied

<template>
  <div class="center">
    <s-checkbox v-model="option"> Option </s-checkbox>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const option = ref(true)
</script>

color

Change the color of the component with the color property, the allowed values ​​are (main colors of Sax Design, RGB, HEX)

Code copied

<template>
  <div class="center">
    <s-checkbox v-model="option1"> Primary </s-checkbox>
    <s-checkbox v-model="option2" color="success"> Success </s-checkbox>
    <s-checkbox v-model="option3" color="danger"> Danger </s-checkbox>
    <s-checkbox v-model="option4" color="warn"> warning </s-checkbox>
    <s-checkbox v-model="option5" color="dark"> dark </s-checkbox>
    <s-checkbox v-model="option6" color="#7d33ff"> HEX </s-checkbox>
    <s-checkbox v-model="option7" color="rgb(59,222,200)"> RGB </s-checkbox>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const option1 = ref<boolean>(true)
const option2 = ref<boolean>(true)
const option3 = ref<boolean>(true)
const option4 = ref<boolean>(true)
const option5 = ref<boolean>(true)
const option6 = ref<boolean>(true)
const option7 = ref<boolean>(true)
</script>

Boolean Value

By default the component is used with a boolean value that when being checked returns true and when not being checked returns false

Code copied

<template>
  <div class="center con-checkbox">
    <s-checkbox v-model="option1">
      {{ option1 }}
    </s-checkbox>
    <s-checkbox v-model="option2">
      {{ option2 }}
    </s-checkbox>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const option1 = ref<boolean>(true)
const option2 = ref<boolean>(false)
</script>

String Value

You may need to return a string when the component is checked for it use the value property with the string you want to return

Code copied

<template>
  <div class="center con-checkbox">
    <s-checkbox v-model="option" value="automatically">
      Save data automatically
    </s-checkbox>

    <span class="data">
      {{ option ? option : 'null' }}
    </span>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const option = ref(null)
</script>

Checkbox group

It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked.

checkbox-group element can manage multiple checkboxes in one group by using v-model which is bound as an Array. Inside the el-checkbox element, label is the value of the checkbox. If no content is nested in that tag, label will be rendered as the description following the button of the checkbox. label also corresponds with the element values in the array. It is selected if the specified value exists in the array, and vice versa.

Code copied

<template>
  <div class="center con-checkbox">
    <s-checkbox-group v-model="options">
      <s-checkbox value="css"> Css </s-checkbox>
      <s-checkbox color="danger" value="html"> Html </s-checkbox>
      <s-checkbox color="warn" value="javascript"> Javascript </s-checkbox>
      <s-checkbox color="#42b883" value="vue"> Vue </s-checkbox>
      <s-checkbox color="dark" value="Sax Design"> Sax Design </s-checkbox>
    </s-checkbox-group>

    <span class="data-check">
      {{ options }}
    </span>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const options = ref(['javascript', 'vue'])
</script>

Data-driven groups

Pass options to let CheckboxGroup render flat or sectioned choices. A section heading selects all enabled children and automatically becomes indeterminate when only part of the section is selected. columns controls the grid and collapses to one column on small screens.

Code copied

<script lang="ts" setup>
import { computed, ref } from 'vue'

const options = [
  {
    label: '内容权限',
    value: 'content',
    columns: 2,
    options: [
      { label: '查看内容', value: 'content:read' },
      { label: '创建内容', value: 'content:create' },
      { label: '编辑内容', value: 'content:update' },
      { label: '删除内容', value: 'content:delete', disabled: true },
    ],
  },
  {
    label: '数据权限',
    value: 'data',
    columns: 2,
    options: [
      { label: '查看报表', value: 'data:read' },
      { label: '导出数据', value: 'data:export' },
    ],
  },
]

const value = ref(['content:read', 'content:create', 'data:read'])
const summary = computed(() => value.value.join('、'))
</script>

<template>
  <div class="checkbox-group-demo">
    <s-checkbox-group v-model="value" :options="options" :columns="2" />
    <p>已选：{{ summary || '无' }}</p>
  </div>
</template>

<style scoped>
.checkbox-group-demo {
  width: min(100%, 620px);
}

.checkbox-group-demo p {
  margin: 12px 4px 0;
  opacity: 0.62;
}
</style>

Checkbox group tabs

CheckboxGroupTabs combines a platform switcher with grouped choices. The checkbox before a tab selects or clears the whole platform, while clicking its label only switches the visible content. Active tabs use color, surface and shadow instead of borders.

Code copied

<script lang="ts" setup>
import { ref } from 'vue'

const tabs = [
  {
    label: 'Facebook',
    value: 'facebook',
    options: [
      {
        label: '动态',
        value: 'feed',
        options: [
          { label: 'Facebook Feed', value: 'facebook_feed' },
          { label: 'Facebook Marketplace', value: 'marketplace' },
          { label: 'Facebook Video Feeds', value: 'video_feeds' },
        ],
      },
      {
        label: '搜索结果',
        value: 'search',
        options: [{ label: 'Facebook Search Results', value: 'search_result' }],
      },
    ],
  },
  {
    label: 'Instagram',
    value: 'instagram',
    options: [
      {
        label: '动态',
        value: 'feed',
        options: [
          { label: 'Instagram Feed', value: 'instagram_feed' },
          { label: 'Instagram Profile Feed', value: 'profile_feed' },
          { label: 'Instagram Explore', value: 'explore' },
          { label: 'Instagram Explore Home', value: 'explore_home' },
        ],
      },
      {
        label: '搜索结果',
        value: 'search',
        options: [
          { label: 'Instagram Search Results', value: 'instagram_search' },
        ],
      },
      {
        label: '快拍和 Reels',
        value: 'story_reels',
        options: [
          { label: 'Instagram Stories', value: 'stories' },
          { label: 'Instagram Reels', value: 'reels' },
          { label: 'Instagram Profile Reels', value: 'profile_reels' },
        ],
      },
    ],
  },
  {
    label: 'Messenger',
    value: 'messenger',
    options: [
      {
        label: '收件箱',
        value: 'inbox',
        options: [
          { label: 'Messenger Inbox', value: 'messenger_inbox' },
          { label: 'Messenger Stories', value: 'messenger_stories' },
        ],
      },
    ],
  },
  {
    label: 'Audience Network',
    value: 'audience_network',
    options: [
      {
        label: '应用和网站',
        value: 'apps_sites',
        options: [
          { label: 'Native, Banner and Interstitial', value: 'native_banner' },
          { label: 'Rewarded Video', value: 'rewarded_video' },
        ],
      },
    ],
  },
]

const value = ref({
  facebook: ['facebook_feed', 'marketplace'],
  instagram: ['instagram_feed', 'explore', 'stories', 'reels'],
  messenger: ['messenger_inbox'],
  audience_network: [],
})
</script>

<template>
  <div class="checkbox-group-tabs-demo">
    <s-checkbox-group-tabs v-model="value" :tabs="tabs" :columns="2" />
  </div>
</template>

<style scoped>
.checkbox-group-tabs-demo {
  width: min(100%, 760px);
}
</style>

Code copied

<template>
  <div class="center con-checkbox">
    <s-checkbox-group v-model="options">
      <s-checkbox
        :value="{
          github: 'https://github.com/webpack/webpack',
          name: 'Webpack',
        }"
      >
        Webpack
      </s-checkbox>

      <s-checkbox
        color="danger"
        :value="{
          github: 'https://github.com/microsoft/TypeScript',
          name: 'Typescript',
        }"
      >
        Typescript
      </s-checkbox>

      <s-checkbox
        color="warn"
        :value="{ github: 'https://github.com/sass/sass', name: 'Sass' }"
      >
        Sass
      </s-checkbox>
    </s-checkbox-group>
    <pre class="data-check">
      {{ options }}
    </pre>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const options = ref([
  {
    github: 'https://github.com/webpack/webpack',
    name: 'Webpack',
  },
])
</script>

Icon

Change the icon inside the checkbox with the icon slot. Custom icons use a white foreground while checked. Stroke SVG paths are drawn automatically; filled icons use a scale and clip reveal. Set icon-animation to draw, pop, or none to override the automatic choice. The slot exposes checked and indeterminate for fully custom motion.

Default icons

Sax Design Vue renders build-time Iconify SVG data. Built-in controls, such as close buttons in Alert or Popup, use SVG icons and require no external icon font. Use the #icon slot when a product needs another icon.

Find and use icons

Search Boxicons for a collection and copy its prefix:name value into SIcon.

Code copied

<template>
  <div class="center checks">
    <s-checkbox v-model="option1" icon-animation="draw">
      <template #icon="{ checked }">
        <svg
          class="checkbox-line-icon"
          :data-checked="checked"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          aria-hidden="true"
        >
          <path
            d="M 4.7071 12.2929 l 5 5 c 0.3905 0.3905 1.0237 0.3905 1.4142 0 l 11 -11"
            stroke-width="3.5"
            stroke-linecap="round"
          />
        </svg>
      </template>
    </s-checkbox>
    <s-checkbox v-model="option2" color="success">
      <template #icon>
        <s-icon name="bx:check-double" />
      </template>
    </s-checkbox>
    <s-checkbox v-model="option3" color="danger">
      <template #icon>
        <s-icon name="bx:x" />
      </template>
    </s-checkbox>
    <s-checkbox v-model="option4" color="warn">
      <template #icon>
        <s-icon name="bxs:shield" />
      </template>
    </s-checkbox>
    <s-checkbox v-model="option5" color="dark">
      <template #icon>
        <s-icon name="bxs:heart" />
      </template>

    <s-checkbox v-model="option6" color="#7d33ff">
      <template #icon>
        <s-icon name="bx:brightness" />
      </template>
    </s-checkbox>
    <s-checkbox v-model="option7" color="rgb(59,222,200)">
      <template #icon>
        <s-icon name="bxs:paint" />
      </template>
    </s-checkbox>
  </div>

Label

Add a label to the checkbox with the default slot of the component

Code copied

<template>
  <div class="center con-checkbox">
    <s-checkbox v-model="option"> Label </s-checkbox>
    <s-checkbox v-model="option2" label-before> Label Before </s-checkbox>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const option = ref(true)
const option2 = ref(true)
</script>

Loading New

Add a loading status to the component with the property loading

Code copied

<template>
  <div class="center con-checkbox">
    <s-checkbox v-model="option" loading> Loading checked </s-checkbox>
    <s-checkbox v-model="option2" loading> Loading unchecked </s-checkbox>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const option = ref(true)
const option2 = ref(false)
</script>

Line Through New

Add a line in the middle of the label when the checkbox is checked with the property line-through

Code copied

<template>
  <div class="center">
    <s-checkbox v-model="option" :line-through="option"> Option </s-checkbox>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const option = ref(true)
</script>

Indeterminate New

There are some cases where you have several checkboxes and you need one that manages all the others for this you can do it with the indeterminate property that adds a different style to the checkbox

Code copied

<template>
  <div class="center">
    <s-checkbox v-model="option" indeterminate> Option </s-checkbox>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const option = ref(true)
</script>

API

CheckboxGroup

Property	Type	Default	Description
v-model	CheckboxValue[]	[]	Flat array containing every selected child value.
options	(CheckboxGroupOption | CheckboxGroupSection)[]	[]	Data-driven options; an item with options becomes a selectable section.
columns	number	1	Default column count. A section can override it with its own columns.
gap	number | string	12	Row and column gap. Numbers are treated as pixels.
disabled-values	CheckboxValue[]	[]	Disable child values and preserve them during section select/clear actions.
disabled-group-values	CheckboxValue[]	[]	Disable select-all for the specified sections.
disabled	boolean	false	Disable the whole group.
min / max	number	-	Minimum and maximum selected value counts.

CheckboxGroupOption supports label, value, disabled, and description. CheckboxGroupSection supports label, value, options, disabled, and columns. Child value entries must remain unique within a CheckboxGroup or tab.

Events: update:modelValue(value) and change(value). Slots: option, group-label, and empty. The default slot remains compatible with manually composed Checkbox children when options is omitted.

CheckboxGroupTabs

Property	Type	Default	Description
v-model	Record<string, CheckboxValue[]>	{}	Selected values stored independently by tab value.
tabs	CheckboxGroupTab[]	[]	Tabs containing label, value, and grouped options.
active-key / v-model:active-key	string | number	First enabled tab	Active tab.
columns	number	2	Default content column count.
gap	number | string	12	Content row and column gap.
disabled	boolean	false	Disable every tab and option.

Events: update:modelValue(value), change(value, activeKey), update:activeKey(activeKey), and tabChange(activeKey). Slots: tab, option, group-label, and empty.