import { Controller, useForm } from 'react-hook-form';
import { Button, FieldError, Form, Input, Label, TextField } from 'react-aria-components';
function App() {
let { handleSubmit, control } = useForm({
defaultValues: {
name: ''
}
});
let onSubmit = (data) => {
// Call your API here...
};
return (
<Form onSubmit={handleSubmit(onSubmit)}>
<Controller
control={control}
name="name"
rules={{ required: 'Name is required.' }}
render={({
field: { name, value, onChange, onBlur, ref },
fieldState: { invalid, error }
}) => (
<TextField
name={name}
value={value}
onChange={onChange}
onBlur={onBlur}
isRequired
validationBehavior="aria"
isInvalid={invalid}
>
<Label>Name</Label>
<Input ref={ref} />
<FieldError>{error?.message}</FieldError>
</TextField>
)}
/>
<Button type="submit">Submit</Button>
</Form>
);
}
import { Controller, useForm } from 'react-hook-form';
import { Button, FieldError, Form, Input, Label, TextField } from 'react-aria-components';
function App() {
let { handleSubmit, control } = useForm({
defaultValues: {
name: ''
}
});
let onSubmit = (data) => {
// Call your API here...
};
return (
<Form onSubmit={handleSubmit(onSubmit)}>
<Controller
control={control}
name="name"
rules={{ required: 'Name is required.' }}
render={({
field: { name, value, onChange, onBlur, ref },
fieldState: { invalid, error }
}) => (
<TextField
name={name}
value={value}
onChange={onChange}
onBlur={onBlur}
isRequired
validationBehavior="aria"
isInvalid={invalid}
>
<Label>Name</Label>
<Input ref={ref} />
<FieldError>{error?.message}</FieldError>
</TextField>
)}
/>
<Button type="submit">Submit</Button>
</Form>
);
}