diff --git a/src/components/checkbox/README.md b/src/components/checkbox/README.md new file mode 100644 index 00000000000..c8e61c74a07 --- /dev/null +++ b/src/components/checkbox/README.md @@ -0,0 +1,79 @@ +# md-checkbox + +`md-checkbox` is a Material Design selection control that allows users to make a binary choice for +a predetermined conditioned. It is modeled after the browser's native checkbox element, and behaves +in the same way. Similar to the native checkbox element, it supports an indeterminate state for +"mixed" checkboxes. + +A demo of the checkbox can be found at https://plnkr.co/edit/P7qce8lN9n2flS6kBhDy?p=preview. + +## Usage + +### Basic Usage + +`md-checkbox` can be used anywhere a normal checkbox would be used, and in the same way. + +```html + +``` + +### Usage within Forms + +In addition to supporting native checkbox functionality, `md-checkbox` also supports `[(ngModel)]` +and `ngControl` for use within forms. + +```html +
+ +
+ + I have read and agree to the terms of service. + +
+ +
+``` + +### Indeterminate Checkboxes + +Indeterminate checkboxes are useful when a checkbox needs to be in a "mixed" state + +```html + + Click the Button Below to Make Me Indeterminate. + + +``` + +### Alignment + +Note that checkboxes can be aligned to come at the "start" or the "end" of its corresponding label. + +```html + + I come after my label. + +``` + +Note that this alignment is preserved within RTL layouts. + +### Accessibility + +By default, `md-checkbox` provides all the accessibility attributes needed. It also supports +keyboard navigation and toggling via the spacebar. However, you can provide an `aria-label` to the +checkbox if you do not wish to have any label text. + +```html + +```