Validator

Validator is not a standalone component in DaisyUI Kit. Instead, it's built into supported form components using the validator prop, and by using the ValidatorHint component to display validation messages or hints.

Supported components include:

Input
TextArea
Select
Toggle
Checkbox
validator class: Add the validator prop to supported components to enable validation styling.
ValidatorHint: Use this component to show validation messages below your form fields.

See below for usage examples and integration details.

Basic Usage

Please enter a valid email address.

Code Example

Basic.vue

Components

ValidatorHint is a standalone component.

ValidatorHint

The ValidatorHint component provides a styled container for validation messages or hints, often used in conjunction with form validation.

ValidatorHint Slots	Description
default	Displays the validation message or hint text.

Examples

With Select

A Select with validation state and a validation message.

Please select an option.

Code Example

Select.vue

With TextArea

A TextArea with validation state and a validation message.

Please enter some text.

Code Example

TextArea.vue

With Toggle

A Toggle with validation state and a validation message.

Please turn this on.

Code Example

Toggle.vue