Skip to content

Latest commit

 

History

History
131 lines (101 loc) · 2.23 KB

File metadata and controls

131 lines (101 loc) · 2.23 KB

CheckboxBlock

Props

All available props see in CheckboxBlock.props.ts

Figma

Component in figma project

i18n

The component natively supports i18n for placeholder values.

You can provide a placeholder as a locale token, and it will be dynamically translated

Usage

<template>
  <checkbox-block v-model="value" placeholder="Checkbox" />
</template>

<script setup lang="ts">
import { CheckboxBlock } from '@tok/ui/components/CheckboxBlock';
import { ref } from 'vue';

const value = ref(true);
</script>

Customization

Sizes

<template>
  <div class="container">
    <checkbox-block v-model="value" size="xxl" />
  </div>
</template>

<script setup lang="ts">
import { CheckboxBlock } from '@tok/ui/components/CheckboxBlock';
import { ref } from 'vue';

const value = ref(true);
</script>

<style lang="scss" scoped>
.container {
  .tok-checkboxblock {
    // custom xxl size
    &[data-size='xxl'] {
      ...
    }

    // customize check icon styles if you want
    &-check {
        ...
    }
  }
}
</style>

State

<template>
  <div class="container">
    <checkbox-block v-model="value" />
  </div>
</template>

<script setup lang="ts">
import { CheckboxBlock } from '@tok/ui/components/CheckboxBlock';
import { ref } from 'vue';

const value = ref(true);
</script>

<style lang="scss" scoped>
.container {
  .tok-checkboxblock {
    // when v-model is true
    &[data-state='checked'] {
        ...
    }

    // when invalid is true
    &[data-state='invalid'] {
        ...
    }

    // when disabled is true
    &[data-state='disabled'] {
        ...
    }
  }
}
</style>

Shape

<template>
  <div class="container">
    <checkbox-block v-model="value" shape="custom" />
  </div>
</template>

<script setup lang="ts">
import { CheckboxBlock } from '@tok/ui/components/CheckboxBlock';
import { ref } from 'vue';

const value = ref(true);
</script>

<style lang="scss" scoped>
.container {
  .tok-checkboxblock {
    // custom shape
    &[data-shape='custom'] {
        ...
    }
  }
}
</style>