Welcome Getting started Layout styles github-circle-black-transparent Source
Components
Badges
App bars
Bottom app bars Top app bars
Buttons
Common buttons FAB Icon buttons Segmented buttons
Cards Carousel Checkboxes Chips Date pickers Dialogs Forms Icons Lists Menus Navigation Progress indicators Pull to refresh Radios Search Selects
Sheets
Bottom sheets Side sheets
Sliders Snackbars Switches Tabs Text fields Time pickers Tooltips Utilities
home apps Buttons palette Two
Materially
github-circle-black-transparent

Forms and validation

Forms support simple submit functionality and change detection and reset functionality

Submit with validations

There are three button types
  • submit Trigger form submission
  • cancel If the form has changes, show alert dialog
  • reset Reset form to initial state
one two three Submit reset Cancel
<!-- method="dialog" Will prevent any page redirects or endpoint calls -->
<form id="one" method="dialog" style="display: inline-grid;" onsubmit="submit(this)">
  <mc-textfield name="name" label="Name" supporting-text="Enter name" required></mc-textfield>

  <mc-textfield name="email" label="Email" supporting-text="Enter email" type="email"></mc-textfield>

  <mc-select name="favnum" label="Pick a number" required supporting-text>
    <mc-option value="1">one</mc-option>
    <mc-option value="2">two</mc-option>
    <mc-option value="3">three</mc-option>
  </mc-select>

  <mc-checkbox name="agree" required label="Agree"></mc-checkbox>
  
  <!-- The buttons do not need to be inside the from element -->
  <mc-button type="submit">Submit</mc-button>
  <mc-button type="reset" style="color: var(--mc-error);">reset</mc-button>
  <!-- type="cancel" is not available on native buttons -->
  <mc-button type="cancel" style="color: var(--mc-error);" onclick="console.log('Called on discard or no change')">Cancel</mc-button>
</form>
        
// submit method
//   in example it is called from the form onsubmit attribute
function submit(form) {
  const formData = new FormData(form);
  console.log([...formData.entries()])
}

// You can also use the submit event
document.querySelector('#one').addEventListener('submit', submit);
            

Cancel change detection

The cancel button will prompt a dialog when it is clicked and detects any changes in the form data
Submit Cancel
<!-- method="dialog" Will prevent any page redirects or endpoint calls -->
<form id="two" method="dialog" style="display: inline-grid;" onsubmit="page.submit(this)">
  <mc-textfield name="name" label="Name" supporting-text="Enter name" required></mc-textfield>

  <mc-checkbox name="agree" required label="Agree"></mc-checkbox>

  <!-- The buttons do not need to be inside the from element -->
  <div style="display: flex; justify-self: end;">
    <mc-button form="two" type="submit">Submit</mc-button>
    <!-- type="cancel" is custom and does not natively exist -->
    <mc-button form="two" type="cancel" onclick="two.reset(); console.log('Called on discard, or when from has no changes');">Cancel</mc-button>
  </div>
</form>
            
// submit method
//   in example it is called from the form onsubmit attribute
function submit(form) {
  const formData = new FormData(form);
  console.log([...formData.entries()])
}

// You can also use the submit event
document.querySelector('#one').addEventListener('submit', submit);
            
menu home apps Get started