If you set a disabled property on the fieldset element, there is no need to set disabled on each input element.
Before😅:
<form onSubmit={handleSubmit}>
<div>
<label>
Email:
<input disabled={loading} type="email" />
</label>
</div>
<div>
<label>
Password:
<input disabled={loading} type="password" />
</label>
</div>
<input disabled={loading} type="submit" value="submit" />
</form>
After😎:
<form onSubmit={handleSubmit}>
<fieldset disabled={loading}>
<div>
<label>
Email:
<input type="email" />
</label>
</div>
<div>
<label>
Password:
<input type="password" />
</label>
</div>
<input type="submit" value="submit" />
</fieldset>
</form>
Bonus: Use legend element to display caption in the fieldset element
<form onSubmit={handleSubmit}>
<fieldset disabled={loading}>
<legend>Login</legend>
<div>
<label>
Email:
<input type="email" />
</label>
</div>
<div>
<label>
Password:
<input type="password" />
</label>
</div>
<input type="submit" value="submit" />
</fieldset>
</form>
Top comments (0)