diff --git a/src/lib/select/OVERVIEW.md b/src/lib/select/OVERVIEW.md index 27aee5f25ddd..8ff4d404f6b0 100644 --- a/src/lib/select/OVERVIEW.md +++ b/src/lib/select/OVERVIEW.md @@ -1,8 +1,43 @@ `` is a form control for selecting a value from a set of options, similar to the native -`` element. You can read more about selects in the +[Material Design spec](https://material.google.com/components/menus.html). -### Use with `@angular/forms` -`` is compatible with `@angular/forms` and supports both `FormsModule` -and `ReactiveFormsModule`. +### Simple select + +In your template, create an `md-select` element. For each option you'd like in your select, add an +`md-option` tag. Note that you can disable items by adding the `disabled` boolean attribute or +binding to it. + +*my-comp.html* +```html + + {{ state.name }} + +``` + +### Getting and setting the select value + +The select component is set up as a custom value accessor, so you can manipulate the select's value using +any of the form directives from the core `FormsModule` or `ReactiveFormsModule`: `ngModel`, `formControl`, etc. + +*my-comp.html* +```html + + {{ state.name }} + +``` + +*my-comp.ts* +```ts +class MyComp { + myState = 'AZ'; + states = [{code: 'AL', name: 'Alabama'}...]; +} +``` + +#### Keyboard interaction: +- DOWN_ARROW: Focus next option +- UP_ARROW: Focus previous option +- ENTER or SPACE: Select focused item diff --git a/src/lib/select/README.md b/src/lib/select/README.md index 6d192d19b456..f00c2932cbb1 100644 --- a/src/lib/select/README.md +++ b/src/lib/select/README.md @@ -1,3 +1,68 @@ -## Work in progress! +# md-select -The select is still a work in progress, so most features have not been implemented. Not ready for use! \ No newline at end of file +`` is a form control for selecting a value from a set of options, similar to the native +`