Checkbox animated

Lowercase

Show code

vue

<script setup lang="ts">
const checked = ref(false)
</script>

<template>
  <label class="flex items-center gap-3">
    <TairoCheckboxAnimated
      v-model="checked"
      variant="success"
    />
    <BaseText
      class="text-muted-500 dark:text"
      size="sm"
    >
      Lowercase
    </BaseText>
  </label>
</template>

TairoCheckboxAnimated

CheckboxRoot

Model	Type
`v-model`	`boolean \| "indeterminate"` The controlled value of the checkbox. Can be binded with v-model.

Prop	Type
`as` default:`-`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`as-child` default:`-`	`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
`class` default:`-`	`unknown`
`default-value` default:`-`	`boolean \| "indeterminate"` The value of the checkbox when it is initially rendered. Use when you do not need to control its value.
`disabled` default:`-`	`boolean` When `true`, prevents the user from interacting with the checkbox
`id` default:`-`	`string` Id of the element
`key` default:`-`	`PropertyKey`
`name` default:`-`	`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`ref` default:`-`	`VNodeRef`
`ref-for` default:`-`	`boolean`
`ref-key` default:`-`	`string`
`required` default:`-`	`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.
`style` default:`-`	`unknown`
`value` default:`-`	`AcceptableValue` The value given as data when submitted with a `name`.

Exposed	Type
`variant`	`"success" \| "primary" \| "info" \| "warning" \| "destructive" \| "muted" \| "light" \| "dark" \| "black" \| "custom"` The color of the checkbox.

Example

Components

TairoCheckboxAnimated