Radio Group
A fieldset that groups radio buttons or checkboxes under
a shared legend. No class name needed.
Radio
<fieldset>
<legend>Favorite fruit</legend>
<label> <input type="radio" name="fruit" value="apple" /> Apple </label>
<label> <input type="radio" name="fruit" value="banana" /> Banana </label>
<label> <input type="radio" name="fruit" value="cherry" /> Cherry </label>
</fieldset>Checkbox
<fieldset>
<legend>Toppings</legend>
<label>
<input type="checkbox" name="toppings" value="cheese" /> Cheese
</label>
<label>
<input type="checkbox" name="toppings" value="tomato" /> Tomato
</label>
<label> <input type="checkbox" name="toppings" value="onion" /> Onion </label>
</fieldset>With description
Add a small element for a hint below the options.
<fieldset>
<legend>Notifications</legend>
<label> <input type="checkbox" name="notify" value="email" /> Email </label>
<label> <input type="checkbox" name="notify" value="sms" /> SMS </label>
<label> <input type="checkbox" name="notify" value="push" /> Push </label>
<small>Choose how you'd like to be notified.</small>
</fieldset>Required
Add required to any input and a * appears on
the legend automatically.
<fieldset>
<legend>Plan</legend>
<label> <input type="radio" name="plan" value="free" required /> Free </label>
<label> <input type="radio" name="plan" value="pro" required /> Pro </label>
<label>
<input type="radio" name="plan" value="enterprise" required /> Enterprise
</label>
</fieldset>