Angular Forms

Basic example

Use <mui-input> and <mui-textarea> elements to use MUI styling:

Title Submit
<mui-form>
  <legend>Title</legend>
  <mui-input ng-model="inputA" hint="Input 1"></mui-input>
  <mui-input ng-model="inputB" hint="Input 2"></mui-input>
  <mui-textarea ng-model="inputC" hint="Textarea"></mui-textarea>
  <mui-button variant="raised">Submit</mui-button>
</mui-form>
View in new tab »

Fixed labels

Use the label attribute to add a fixed label.

Title Submit
<mui-form>
  <legend>Title</legend>
  <mui-input ng-model="inputA" label="Input 1"></mui-input>
  <mui-input ng-model="inputB" label="Input 2"></mui-input>
  <mui-textarea ng-model="inputC" label="Textarea"></mui-textarea>
  <mui-button variant="raised">Submit</mui-button>
</mui-form>
View in new tab »

Floating labels

Use the float-label attribute to float labels.

Title Submit
<mui-form>
  <legend>Title</legend>
  <mui-input ng-model="inputA" label="Input 1" float-label></mui-input>
  <mui-input ng-model="inputB" label="Input 2" float-label></mui-input>
  <mui-textarea ng-model="inputC" label="Textarea" float-label></mui-textarea>
  <mui-button variant="raised">Submit</mui-button>
</mui-form>
View in new tab »

Inline Form

Use inline to inline inputs above the small breakpoint

Submit
<form mui-form-inline>
  <mui-input ng-model="inputA" hint="Placeholder 1"></mui-input>
  <mui-button variant="raised">Submit</mui-button>
</form>
View in new tab »

Checkboxes and radio buttons

Use <mui-checkbox> and <mui-radio> elements for improved styling.

<form>
  <mui-checkbox ng-model="inputA1" name="inputA1" label="Option one"></mui-checkbox>
  <mui-checkbox ng-model="inputA2" name="inputA2" label="Option two" checked></mui-checkbox>
  <mui-checkbox ng-model="inputA3" name="inputA3" label="Option three is disabled" ng-disabled="true"></mui-checkbox>
  <mui-radio ng-model="inputB" name="inputB" label="Option one"></mui-radio>
  <mui-radio ng-model="inputB" name="inputB" label="Option two" checked></mui-radio>
  <mui-radio ng-model="inputB" name="inputB" label="Option three is disabled" ng-disabled="true"></mui-radio>
</form>
View in new tab »

Select boxes

Use <Select> elements for MUI style select boxes.

<script>
  // Add controller to app
  angular.module('myApp').controller('SelectCtrl', function($scope) {
    $scope.inputA = 'option-3';
    $scope.inputB = 'option-2';
  });
</script>
<form ng-controller="SelectCtrl">
  <mui-select ng-model="inputA" name="inputA">
    <mui-option value="option-1" label="Option 1"></mui-option>
    <mui-option value="option-2" label="Option 2"></mui-option>
    <mui-option value="option-3" label="Option 3"></mui-option>
    <mui-option value="option-4" label="Option 4"></mui-option>
  </mui-select>
  <mui-select ng-model="inputB" name="inputB" use-default>
    <mui-option value="option-1" label="Option 1"></mui-option>
    <mui-option value="option-2" label="Option 2"></mui-option>
    <mui-option value="option-3" label="Option 3"></mui-option>
    <mui-option value="option-4" label="Option 4"></mui-option>
  </mui-select>
</form>
View in new tab »

Form validation

Use required and <mui-input type="email|url|tel"> to take advantage of built-in HTML5 validation.

Title Submit
<mui-form>
  <legend>Title</legend>
  <mui-input ng-model="inputA" label="Required Text Field" required></mui-input>
  <mui-input ng-model="inputB" label="Required Email Address" type="email" float-label required></mui-input>
  <mui-textarea ng-model="inputC" label="Required Textarea" float-label required></mui-textarea>
  <mui-input ng-model="inputC" label="Email Address" type="email" value="Validation error"></mui-input>
  <mui-button variant="raised">Submit</mui-button>
</mui-form>
View in new tab »
« Previous Next »