import { useForm } from 'react-hook-form';
import { useTranslation } from 'next-i18next';
const form = useForm();
const { t, i18n } = useTranslation();
const stringData = ['1', '2', '3', '4'];
const data = [
{
id: 1,
name: 'Wade Cooper',
description:
'Lorem ipsum, dolor sit amet consectetur adipisicing elit.',
image: 'https://source.unsplash.com/user/c_v_r/100x100',
},
{
id: 2,
name: 'Arlene Mccoy',
image: 'https://source.unsplash.com/user/c_v_r/100x100',
description:
'Lorem ipsum, dolor sit amet consectetur adipisicing elit.',
},
{
id: 3,
name: 'Devon Webb',
description:
'Lorem ipsum, dolor sit amet consectetur adipisicing elit.',
image: 'https://source.unsplash.com/user/c_v_r/100x100',
},
{
id: 4,
name: 'Tom Cook',
description:
'Lorem ipsum, dolor sit amet consectetur adipisicing elit.',
image: 'https://source.unsplash.com/user/c_v_r/100x100',
},
];
<Form
onSubmit={form.handleSubmit(onSubmit)}
className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
>
<Input
name="email"
label="Email"
type="email"
form={form}
validation={Validation(t)
.required()
.isEmail()
.minLength(6)
.maxLength(24)
.get()}
/>
<TextArea
name="description"
label="Description"
rows={4}
form={form}
validation={Validation(t).required().minLength(6).get()}
/>
<AutoComplete
name="autocomplete"
label="Multi Auto Complete"
multiple={true}
placeholder={t('form:choose')}
defaultValue={[{ id: 1, name: 'Osma' }]}
// url="api/manager/units"
data={data}
form={form}
validation={Validation(t).required().get()}
/>
<ListBox
name="multi_list_box_image"
label="Multi Image List Box"
multiple={true}
placeholder={t('form:choose')}
defaultValue={[{ id: 1, name: 'Wade Cooper' }]}
// url="api/manager/units"
data={data}
form={form}
validation={Validation(t).required().get()}
/>
<CheckBox
id="checkbox_single"
name={'checkbox_single'}
value="1"
title="Checkbox Single"
description="Checkbox Single Description"
validation={Validation(t).required().get()}
form={form}
/>
<CheckBoxGroup
name="checkbox_multi"
options={stringData}
notTitle={true}
value={['1', '2', '4']}
validation={Validation(t).required().get()}
form={form}
/>
<h4>Single Radio</h4>
<Radio
id="radio_single"
name="radio_single"
value="1"
title="Checkbox Single"
description="Checkbox Single Description"
validation={Validation(t).required().get()}
form={form}
/>
<h4>Group Radio</h4>
<RadioGroup
name="radio_object_group"
options={data}
validation={Validation(t).required().get()}
value="2"
form={form}
/>
<Button label="Gönder" defaultValue="submit" />
</Form>
eticex-form
2.0.9 • Public • PublishedReadme
Keywords
nonePackage Sidebar
Install
npm i eticex-form
Weekly Downloads
110
Version
2.0.9
License
ISC
Unpacked Size
558 kB
Total Files
175