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'
}
];