Theme:
Form Group
Form groups wrap a label, input, and optional helper text together. They support required indicators and error states.
Basic Form Group
We will never share your email with anyone.
<div class="dui-form-group">
<label class="dui-label">Email address</label>
<input type="email" class="dui-input dui-input-bordered" placeholder="you@example.com" />
<span class="dui-helper-text">We will never share your email with anyone.</span>
</div>
Required Field
<div class="dui-form-group">
<label class="dui-label dui-label-required">Full name</label>
<input type="text" class="dui-input dui-input-bordered" placeholder="Jane Smith" />
</div>
Error State
Password must be at least 8 characters.
<div class="dui-form-group">
<label class="dui-label dui-label-required">Password</label>
<input type="password" class="dui-input dui-input-error" />
<span class="dui-helper-text dui-helper-text-error">Password must be at least 8 characters.</span>
</div>
Success State
Username is available.
<div class="dui-form-group">
<label class="dui-label">Username</label>
<input type="text" class="dui-input dui-input-success" value="janedoe" />
<span class="dui-helper-text dui-helper-text-success">Username is available.</span>
</div>