Use <mui-input> and <mui-textarea> elements to use MUI styling:
<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>
Use the label attribute to add a fixed label.
<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>
Use the float-label attribute to float labels.
<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>
Use inline to inline inputs above the small breakpoint
<form mui-form-inline>
<mui-input ng-model="inputA" hint="Placeholder 1"></mui-input>
<mui-button variant="raised">Submit</mui-button>
</form>
Use <mui-checkbox> and <mui-radio> elements for improved styling.
<script>
// Add controller to app
angular.module('myApp').controller('CheckboxRadioCtrl', function($scope) {
$scope.inputA1 = true;
$scope.inputA2 = false;
$scope.inputA3 = true;
$scope.inputB = 'two';
});
</script>
<form ng-controller="CheckboxRadioCtrl">
<mui-checkbox ng-model="inputA1" name="inputA1" label="Option one" ng-checked="true"></mui-checkbox>
<mui-checkbox ng-model="inputA2" name="inputA2" label="Option two"></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" value="one"></mui-radio>
<mui-radio ng-model="inputB" name="inputB" label="Option two" value="two"></mui-radio>
<mui-radio ng-model="inputB" name="inputB" label="Option three is disabled" value="three" ng-disabled="true"></mui-radio>
</form>
Use <Select> elements for MUI style select boxes. Please note that MUI uses the browser's default <select> menu UI on mobile interfaces.
<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>
Use required and <mui-input type="email|url|tel"> to take advantage of built-in HTML5 validation.
<script>
// Add controller to app
angular.module('myApp').controller('ValidationCtrl', function($scope) {
$scope.inputD = 'Validation error';
});
</script>
<mui-form ng-controller="ValidationCtrl">
<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="inputD" label="Email Address" type="email"></mui-input>
<mui-button variant="raised">Submit</mui-button>
</mui-form>