FormKit DaisyUI classes

formkit.config.ts

import { generateClasses } from '@formkit/themes';
import { defaultConfig } from '@formkit/vue';

const textClassification = {
	outer: '',
	wrapper: '',
	inner: 'join',
	help: '',
	message: '',
	label: 'label',
	input:
		'input input-bordered join-item flex-grow focus-within:input-secondary formkit-invalid:input-error',
	prefixIcon:
		'join-item inline-flex border border-base-content text-neutral-content formkit-disabled:border-base-200 formkit-disabled:bg-base-200',
	suffixIcon:
		'join-item inline-flex border border-base-content text-neutral-content formkit-disabled:border-base-200 formkit-disabled:bg-base-200',
};

const buttonClassification = {
	input: '$reset btn btn-secondary px-8 font-bold text-base',
};

export default defaultConfig({
	config: {
		classes: generateClasses({
			// The top level form component.
			form: {
				form: 'flex flex-col gap-4',
			},

			// All inputs.
			global: {
				outer: '',
				wrapper: 'form-control',
				inner: 'flex',
				help: 'text-xs text-gray-500 my-2',
				message: 'text-error text-xs mx-1 my-2',
				legend: 'label label-text font-bold formkit-invalid:text-error',
				label: 'label-text font-bold formkit-invalid:text-error',
				input: 'flex-grow',
			},

			// Text inputs...
			text: textClassification,
			email: textClassification,
			number: textClassification,
			password: textClassification,
			search: textClassification,
			url: textClassification,
			tel: textClassification,

			textarea: {
				input: 'textarea textarea-bordered focus-within:textarea-secondary formkit-invalid:textarea-error flex resize-y',
				label: 'label',
			},

			// Time & date inputs...
			date: textClassification,
			'datetime-local': textClassification,
			time: textClassification,
			week: textClassification,
			month: textClassification,

			// Buttons...
			submit: buttonClassification,
			button: buttonClassification,

			//
			checkbox: {
				wrapper: '$reset label cursor-pointer',
				// fieldset: 'card card-bordered p-2',
				input: 'checkbox focus-within:checkbox-secondary formkit-invalid:checkbox-error ',
				inner: '',
				label: 'ml-2 mr-auto',
				legend: '',
			},

			radio: {
				wrapper: '$reset label cursor-pointer',
				// fieldset: 'card card-bordered p-2',
				input: 'radio focus-within:radio-secondary formkit-invalid:radio-error ',
				inner: '',
				label: 'ml-2 mr-auto',
				legend: '',
			},

			select: {
				...textClassification,
				input: 'select select-bordered focus-within:select-secondary formkit-invalid:select-error join-item flex-grow',
			},

			range: {
				...textClassification,
				input: 'range focus-within:range-secondary formkit-invalid:range-error',
			},

			file: {
				...textClassification,
				input: 'file-input focus-within:file-input-secondary formkit-invalid:file-input-error' ,
			},

			color: {
				...textClassification,
				input: '',
			},
		}),
	},
});