Styles

Just respect standard of each libraries CSS (classes names ...etc)

Boostrap

const fields = [
	{
type: 'email',
name: 'email',
class: ['form-control'],
placeholder: 'Tap your email',
validation: ['required', 'email'],
messages: {
	required: 'Custom message for required rule!'
}
	},
	{
type: 'select',
name: 'name-field-select',
id: 'id-field-select',
class: ['form-control'],
label: 'Label field select',
disabled: false,
options: [
	{
		value: 1,
		title: 'option 1'
	},
	{
		value: 2,
		title: 'option 2'
	}
]
	},
	{
type: 'radio',
name: 'name-field-radio',
id: 'id-field-radio',
class: ['form-check-input'],
disabled: false,
items: [
	{
		id: 'radio1',
		value: 1,
		title: 'radio 1'
	},
	{
		id: 'radio2',
		value: 2,
		title: 'radio 2'
	}
],
aligne: 'default'
	}
];

Tailwind

const fields = [
	{
type: 'email',
name: 'email',
class: ['form-input px-4 py-3 rounded-full'],
placeholder: 'Tap your email',
validation: ['required', 'email'],
messages: {
	required: 'Custom message for required rule!'
}
	},
	{
type: 'select',
name: 'name-field-select',
id: 'id-field-select',
class: ['form-select px-4 py-3 rounded-full'],
label: 'Label field select',
disabled: false,
options: [
	{
		value: 1,
		title: 'option 1'
	},
	{
		value: 2,
		title: 'option 2'
	}
]
	},
	{
type: 'radio',
name: 'name-field-radio',
id: 'id-field-radio',
class: ['form-checkbox rounded text-pink-500'],
disabled: false,
items: [
	{
		id: 'radio1',
		value: 1,
		title: 'radio 1'
	},
	{
		id: 'radio2',
		value: 2,
		title: 'radio 2'
	}
],
aligne: 'default'
	}
];