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 SubmitresetCancel

<form style="display: inline-grid;" id=one method=dialog onsubmit=submit(this)>
  <mc-textfield supporting-text="Enter name" label=Name name=name required></mc-textfield>

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

  <mc-select label="Pick a number" name=favnum 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 label=Agree name=agree required></mc-checkbox>
  
  
  <mc-button type=submit>Submit</mc-button>
  <mc-button style="color: var(--mc-error);" type=reset>reset</mc-button>
  
  <mc-button onclick="console.log('Called on discard or no change')" style="color: var(--mc-error);" type=cancel>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
SubmitCancel

<form style="display: inline-grid;" id=two method=dialog onsubmit=page.submit(this)>
  <mc-textfield supporting-text="Enter name" label=Name name=name required></mc-textfield>

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

  
  <div style="display: flex; justify-self: end;">
    <mc-button form=two type=submit>Submit</mc-button>
    
    <mc-button onclick="two.reset(); console.log('Called on discard, or when from has no changes');" form=two type=cancel>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