Menu
Documentation

Checkbox Animated

TairoCheckboxAnimated is an enhanced checkbox component featuring a smooth circular animation with checkmark and customizable color variants for different states.

Example

Components

TairoCheckboxAnimated

CheckboxRoot
Model Type
v-model
boolean | "indeterminate" | null

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.

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

name
default:-
string

The name of the field. Submitted with its owning form as part of a name/value pair.

required
default:-
boolean

When `true`, indicates that the user must set the value before the owning form can be submitted.

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.