I’m using NextUI with react-hook-form
in a Next.JS project. I used isClearable
. It’s showing a cross mark on the field when filled, but it’s not working.
<code><Controller
control={control}
name="username"
render={({ field }) => (
<Input
{...field}
isClearable
className="mb-3"
errorMessage={errors.username?.message?.toString()}
isInvalid={!!errors.username?.message?.toString()}
label={<strong>Username</strong>}
placeholder="Enter your username"
variant="underlined"
/>
)}
/>
</code>
<code><Controller
control={control}
name="username"
render={({ field }) => (
<Input
{...field}
isClearable
className="mb-3"
errorMessage={errors.username?.message?.toString()}
isInvalid={!!errors.username?.message?.toString()}
label={<strong>Username</strong>}
placeholder="Enter your username"
variant="underlined"
/>
)}
/>
</code>
<Controller
control={control}
name="username"
render={({ field }) => (
<Input
{...field}
isClearable
className="mb-3"
errorMessage={errors.username?.message?.toString()}
isInvalid={!!errors.username?.message?.toString()}
label={<strong>Username</strong>}
placeholder="Enter your username"
variant="underlined"
/>
)}
/>
The isClearable
is not directly meant to clear the field, it’s actually for showing a cross icon to the edge of the field when the field is filled. The actual ‘clear’ thing has to be done explicitly. Here’s the revised code that will clear the field using the cross icon.
<code><Controller
control={control}
name="username"
render={({ field }) => (
<Input
{...field}
isClearable
className="mb-3"
errorMessage={errors.username?.message?.toString()}
isInvalid={!!errors.username?.message?.toString()}
label={<strong>Username</strong>}
placeholder="Enter your username"
variant="underlined"
onClear={() => field.onChange("")}
/>
)}
/>
</code>
<code><Controller
control={control}
name="username"
render={({ field }) => (
<Input
{...field}
isClearable
className="mb-3"
errorMessage={errors.username?.message?.toString()}
isInvalid={!!errors.username?.message?.toString()}
label={<strong>Username</strong>}
placeholder="Enter your username"
variant="underlined"
onClear={() => field.onChange("")}
/>
)}
/>
</code>
<Controller
control={control}
name="username"
render={({ field }) => (
<Input
{...field}
isClearable
className="mb-3"
errorMessage={errors.username?.message?.toString()}
isInvalid={!!errors.username?.message?.toString()}
label={<strong>Username</strong>}
placeholder="Enter your username"
variant="underlined"
onClear={() => field.onChange("")}
/>
)}
/>
On the onClear
property, the field.onChange
method provided by react-hook-form
automatically updates the form’s value without needing a separate state variable.