Documentation
Documentation Hub

BaseCheckbox

Checkbox straight

The checkbox component can have different shapes. Here is an example of a straight checkbox.

Default shape of all <BaseCheckbox> can be set in your .app/app.config.ts.
Show code

Checkbox rounded

The checkbox component can have different shapes. Here is an example of a rounded checkbox.

Show code

Checkbox curved

The checkbox component can have different shapes. Here is an example of a curved checkbox.

Show code

Checkbox circle

The checkbox component can have different shapes. Here is an example of a full checkbox.

Show code

Disabled state

The checkbox component can show a disabled state. Use the disabled prop to make a checkbox disabled.

Show code

Custom behavior

Use true-value/false-value to create custom behavior

Show code

Multiple values

By default, the checkbox value has only two states: true and false. To use checkbox to select multiple options, define the v-model to an array.

Show code

Custom colors

You can use any colors defined with tailwind, use classes props to set your own values

Show code

#<BaseCheckbox>

Model

v-model
The model value of the checkbox.
Show example

Properties

color
The color of the checkbox. Can be 'default', 'primary', 'info', 'success', 'warning', or 'danger'
Show example
label
The label to display for the checkbox.
Show example
id
The form input identifier.
Show example
shape
The shape of the checkbox.
Show example
error
An error message to display below the checkbox label.
Show example
classes
Optional CSS classes to apply to the wrapper, label, and input elements.
Show example
true-value
The value to set when the checkbox is checked.
Show example
false-value
The value to set when the checkbox is unchecked.
Show example
disabled
Whether the checkbox is disabled.
Show example
indeterminate
Whether the checkbox is in indeterminate state.
Show example

Slots

#default
Show example

Exposed

el
The underlying HTMLInputElement element.
Show example