These resets are local classes, not a second global preflight. Add only the reset you need and then choose the element’s visible treatment with Standard utilities or a component shortcut.
| Class | Removes or normalizes |
|---|---|
reset-fieldset |
Margins, padding, border width, and minimum inline size |
reset-heading |
Heading family, size, style, weight, stretch, and line height |
reset-list |
List marker image/type and position |
reset-button |
Native appearance, radius, image, surface, and several type defaults |
reset-select |
Native appearance, radius, image, surface, and several type defaults |
reset-textarea |
Native appearance and type defaults, retaining multiline text behavior |
reset-input |
Native appearance and type defaults |
reset-checkbox |
Native appearance, image, radius, and surface |
reset-radio |
Native appearance, image, surface, with a circular radius |
reset-fieldset is particularly useful when you want a flex or grid group
without losing the browser’s grouping semantics:
<fieldset class="reset-fieldset">
<legend class="text-label">Delivery method</legend>
<label><input name="delivery" type="radio" value="email" /> Email</label>
<label><input name="delivery" type="radio" value="post" /> Post</label>
</fieldset>The legend still names the group, its radios remain native, and a disabled
fieldset still disables descendants. The reset does not clear form values.
Appearance resets on checkbox, radio, select, and other controls can remove the browser’s visible affordance. Add clear checked, focus, disabled, invalid, and forced-colors styling before shipping a custom control. A reset does not add an accessible name or replace keyboard/form behavior.