import React, { useState } from
"react"
;
import {
Button, Flex, Box, Input, Radio,
RadioGroup, Checkbox, Text, Textarea,
Select, Tooltip, FormControl, FormLabel,
Stack,
} from
"@chakra-ui/react"
;
const Article = () => {
const [formData, setFormData] = useState({
firstName:
""
,
emailAddress:
""
,
gender:
"female"
,
languages: [],
nationality:
""
,
address:
""
,
});
const handleInputChange = (field, value) => {
setFormData({
...formData,
[field]: value,
});
};
const handleLanguageCheckboxChange =
(language) => {
const languages =
formData.languages.includes(language)
? formData.languages
.filter((lang) => lang !== language)
: [...formData.languages, language];
setFormData({
...formData,
languages,
});
};
const handleSubmit =
() => {
console.log(
"Form Submitted:"
, formData);
alert(
"Form submitted successfully!"
);
setFormData({
firstName:
""
,
emailAddress:
""
,
gender:
"female"
,
languages: [],
nationality:
""
,
address:
""
,
});
};
return
(
<Box bg=
"lightgrey"
w=
"100%"
p={4}>
<Flex justifyContent=
"center"
>
<Flex
direction=
"column"
alignItems=
"center"
w={{ base:
"90%"
, md:
"70%"
, lg:
"50%"
}}>
<Text as=
"h2"
fontWeight=
"bold"
>
Form Inputs by Chakra UI
</Text>
<FormControl isRequired>
<FormLabel>First name</FormLabel>
<Input
placeholder=
"First name"
onChange={
(e) =>
handleInputChange(
"firstName"
,
e.target.value)} />
</FormControl>
<FormControl>
<FormLabel>Email address</FormLabel>
<Tooltip
label=
"Enter your mail ID for notifications"
fontSize=
"0.7rem"
bgColor=
"#2F8D46"
>
<Input
placeholder=
"Enter mail ID for notifications "
size=
"md"
my=
"0.2rem"
onChange={(e) =>
handleInputChange(
"emailAddress"
,
e.target.value)
}
/>
</Tooltip>
</FormControl>
<FormControl>
<FormLabel>Choose your gender:</FormLabel>
<RadioGroup
defaultValue={formData.gender}
onChange={
(value) =>
handleInputChange(
"gender"
, value)
}>
<Stack spacing={5} direction=
"row"
>
<Radio colorScheme=
"red"
value=
"male"
>
Male
</Radio>
<Radio colorScheme=
"green"
value=
"female"
>
Female
</Radio>
</Stack>
</RadioGroup>
</FormControl>
<FormControl>
<FormLabel>Choose Language:</FormLabel>
<Stack spacing={5} direction=
"row"
>
<Checkbox
isChecked={formData.languages
.includes(
"English"
)}
onChange={
() => handleLanguageCheckboxChange(
"English"
)
}>
English
</Checkbox>
<Checkbox
isChecked={formData.languages.includes(
"Hindi"
)}
onChange={
() => handleLanguageCheckboxChange(
"Hindi"
)
}>
Hindi
</Checkbox>
</Stack>
</FormControl>
<FormControl>
<FormLabel>Choose your Nationality:</FormLabel>
<Select
placeholder=
"Select option"
onChange={
(e) =>
handleInputChange(
"nationality"
,
e.target.value)
}>
<option value=
"indian"
>
Indian
</option>
<option value=
"nepali"
>
Nepali
</option>
<option value=
"others"
>
Others
</option>
</Select>
</FormControl>
<FormControl>
<FormLabel>Address:</FormLabel>
<Textarea
placeholder=
"Enter your address"
onChange={
(e) => handleInputChange(
"address"
,
e.target.value)
} />
</FormControl>
<Button
variant=
"solid"
mt=
"5"
colorScheme=
"green"
size=
"md"
onClick={handleSubmit}>
Submit form
</Button>
</Flex>
</Flex>
</Box>
);
};
export
default
Article;