Comments (5)
@vedantnn71 I think you need to use Controller for that.
...
import { Controller, useForm } from 'react-hook-form';
export default function Survey() {
const {
register,
handleSubmit,
formState: { errors },
reset,
control,
} = useForm<{
isDesktop: boolean;
}>();
...
return (
<form>
<Label htmlFor="isDesktop">
Are you using a desktop version of our app?
</Label>
<Controller
control={control}
name="isDesktop"
render={({ field: { onChange, value, ref } }) => (
<Checkbox onCheckedChange={onChange} checked={value} ref={ref} />
)}
/>
<button>Submit</button>
</form>
);
}
from ui.
Example for select input with react hook form controller. Confusing part for me was that the HTML select element is the SelectContent
element
<Controller
control={control}
name="jobPostEmployment"
render={({
field: { onChange, onBlur, value, name, ref },
fieldState: { invalid, isTouched, isDirty, error },
formState,
}) => (
<div>
<Select name={name} onValueChange={onChange} defaultValue={value}>
<SelectTrigger className="w-[180px] mt-2">
<SelectValue placeholder={formatSelectValue(value)} />
</SelectTrigger>
<SelectContent ref={ref}>
<SelectItem
value={
AdbJobPostEmploymentType.JobPostEmploymentTypeFullTime
}
>
{formatSelectValue(
AdbJobPostEmploymentType.JobPostEmploymentTypeFullTime
)}
</SelectItem>
<SelectItem
value={AdbJobPostEmploymentType.JobPostEmploymentTypeHourly}
>
{formatSelectValue(
AdbJobPostEmploymentType.JobPostEmploymentTypeHourly
)}
</SelectItem>
<SelectItem
value={
AdbJobPostEmploymentType.JobPostEmploymentTypePartTime
}
>
{formatSelectValue(
AdbJobPostEmploymentType.JobPostEmploymentTypePartTime
)}
</SelectItem>
</SelectContent>
</Select>
from ui.
@its-monotype thank you! that helped me to solve it!
from ui.
@austincollinpena Your comment saved my life!!! 🙏🏻
from ui.
Using this approach, how can you define stuff like "required" and "minLength"?
from ui.
Related Issues (20)
- [feat]: Select all for command group HOT 1
- [bug]: Outdated component HOT 1
- [bug]: 30days and 7days chart-area-interactive is not displayed.
- [feat]: Tab on Command Input to select value from CommandList HOT 1
- [feat]: Add Radio Cards support HOT 2
- [feat]: Piechart HOT 2
- [bug]: CLI --version flag reports incorrect version (0.0.2)
- [bug]: Astro Getting Started instructions fail to create src/styles/global.css HOT 1
- [bug]: y-axis is showing the sum of two area charts HOT 4
- [bug]: "yarn" cli copy button copies "npm" cli HOT 2
- [docs]: add links to source HOT 13
- [bug]: checkbox value not submitted in external form HOT 3
- [bug]: no hover bg color for select item HOT 2
- [bug]: Development mode warnings
- [bug]: toast doesn't show with select form demo HOT 1
- [bug]: fix chart breaking theme on install HOT 1
- [bug]: The input type:file display does not match the documentation HOT 7
- [bug]: Bar Chart - Interactive Drawer Close ('X') Button Unresponsive
- [feat]: Hello Sir, can we get an Image Dropzone as part of the inputs forms. Thanks ❤️ HOT 1
- [bug]: react-hook-form Controller and Select Component Issue: Value Resets to Empty String on Selection (Working in Sandbox, Failing in Local Environment)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ui.