Select

Directive for creating a material designed select control menu.

As for all Blox Material directives: the controls can be used with or without the angular forms package.

Accessibility

This directive will automatically apply proper accessibility attributes to the control, and its items

Select Demo



Your choice:

Customization:


API

Directive: MdcSelectControlDirective

Selector: select[mdcSelectControl]

Directive for the select control of an mdcSelect directive. Should be used as the first child element of the mdcSelect.

PropertyDescription
@Input()
id
string

Mirrors the id attribute. If no id is assigned, this directive will assign a unique id by itself. If an mdcFloatingLabel for this select control is available, the mdcFloatingLabel will automatically set its for attribute to this id value.

@Input()
disabled
any

If set to a value other than false, the mdcSelectControl will be in disabled state.

Directive: MdcSelectDirective

Selector: [mdcSelect]

Directive for a spec aligned material design 'Select Control'. This directive should wrap an mdcSelectControl, and an mdcFloatingLabel directive.

PropertyDescription
@Input()
box
any

When this input is defined and does not have value false, the select will be styled as a box select.

@Input()
outlined
any

When this input is set to a value other than false, the select control will be styled with a notched outline.