Forms

Form styling is part of the scoped base stylesheet. Native<form>, <fieldset>, labels, inputs, selects, textareas, checkboxes, radios, and file controls are refined only inside a data-mrscope. No wrapper component is required.

<form>
  <label for="profile-name">Name</label>
  <input id="profile-name" name="name" autocomplete="name" required>

  <label for="profile-role">Role</label>
  <select id="profile-role" name="role">
    <option>Developer</option>
    <option>Designer</option>
  </select>

  <label for="profile-notes">Notes</label>
  <textarea id="profile-notes" name="notes"></textarea>

  <button type="submit">Save</button>
</form>

State and accessibility

• Native disabled, required, validation, focus, and form-submission semantics remain authoritative.
• Checkbox/radio state uses the browser's native checked state and accent color.
• File inputs remain normal browser file controls; Markup Refine styles the selector button without replacing it.
• Use real labels and normal form attributes rather than encoding state in presentation classes.

Related enhancements

For a file input that needs an explicit clear action, seeResettable file input. For remote forms inside modal subinteractions, see Remote Layer navigation.