14.0.0 • Published 12 months ago

@material/form-field v14.0.0

Weekly downloads
47,856
License
MIT
Repository
github
Last release
12 months ago

Form Fields

MDC Form Field provides an mdc-form-field helper class for easily making theme-aware, RTL-aware form field + label combos. It also provides an MDCFormField class for easily making input ripples respond to label events.

Installation

npm install @material/form-field

CSS Usage

The mdc-form-field class can be used as a parent element, with any combination of adjacent input and label as immediate children:

<div class="mdc-form-field">
  <input type="checkbox" id="input">
  <label for="input">Input Label</label>
</div>

By default, this will position the label after the input. You can change this behavior using the align-end modifier class.

<div class="mdc-form-field mdc-form-field--align-end">
  <input type="checkbox" id="input">
  <label for="input">Input Label</label>
</div>

Now the label will be positioned before the checkbox.

Usage with MDC Web Components

mdc-form-field works not just with input elements, but with any immediate child element as long as its successive sibling is a label element. This means it will work for MDC Web form controls such as Checkbox and Radio:

<div class="mdc-form-field">
  <div class="mdc-checkbox">
    <input type="checkbox"
           id="my-checkbox"
           class="mdc-checkbox__native-control"/>
    <div class="mdc-checkbox__background">
      <svg class="mdc-checkbox__checkmark"
           viewBox="0 0 24 24">
        <path class="mdc-checkbox__checkmark-path"
              fill="none"
              stroke="white"
              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
      </svg>
      <div class="mdc-checkbox__mixedmark"></div>
    </div>
  </div>
  <label for="my-checkbox" id="my-checkbox-label">This is my checkbox</label>
</div>

Note that MDC Form Field is not intended for cases where a label and input are already handled together by another component's styles and logic. For example, JavaScript-enhanced instances of MDC Text Field already manage a label and input together under their own root element.

RTL Support

mdc-form-field is automatically RTL-aware, and will re-position elements within an RTL context. mdc-form-field will apply RTL styles whenever it, or its ancestors, has a dir="rtl" attribute.

JS Usage

Including in code

ES2015

import {MDCFormField, MDCFormFieldFoundation} from '@material/form-field';

CommonJS

const mdcFormField = require('mdc-form-field');
const MDCFormField = mdcFormField.MDCFormField;
const MDCFormFieldFoundation = mdcFormField.MDCFormFieldFoundation;

AMD

require(['path/to/mdc-form-field'], mdcFormField => {
  const MDCFormField = mdcFormField.MDCFormField;
  const MDCFormFieldFoundation = mdcFormField.MDCFormFieldFoundation;
});

Global

const MDCFormField = mdc.formField.MDCFormField;
const MDCFormFieldFoundation = mdc.formField.MDCFormFieldFoundation;

Instantiation

import {MDCFormField} from '@material/form-field';

const formField = new MDCFormField(document.querySelector('.mdc-form-field'));

MDCFormField API

The MDCFormField functionality is exposed through a single accessor method.

MDCFormField.input

Read-write property that works with an instance of an MDC Web input element.

In order for the label ripple integration to work correctly, this property needs to be set to a valid instance of an MDC Web input element which exposes a ripple getter.

const formField = new MDCFormField(document.querySelector('.mdc-form-field'));
const radio = new MDCRadio(document.querySelector('.mdc-radio'));

formField.input = radio;

No action is taken if the input property is not set or the input instance doesn't expose a ripple getter.

Adapter

Method SignatureDescription
registerInteractionHandler(type: string, handler: EventListener) => voidAdds an event listener handler for event type type to the label.
deregisterInteractionHandler(type: string, handler: EventListener) => voidRemoves an event listener handler for event type type to the label.
activateInputRipple() => voidActivates the ripple on the input element. Should call activate on the input element's ripple property.
deactivateInputRipple() => voidDeactivates the ripple on the input element. Should call deactivate on the input element's ripple property.
@zentek/radiomdwrapper@beezydev/checkbox@beezydev/radio@everything-registry/sub-chunk-584svmdtest-rsmdcsvelte-arcadia@codeadraas/vue3-material@dev.mohe/mwc-formfield@defense-unicorns/unicorn-ui@detachhead/smui-form-field@cpangular/ng-material-themestencil-todo-listsolid-material-components@arterial/form-field@authentic/mwc-formfield@aurelia2-mdc-web/form-field@aurelia-mdc-web/form-field@bitchin/react-material-web@betazuul/form-field@betsybot/betsy-web-components@bringhub/fabric.jszarinpal-story-bookvue-material-design-componentsvegatro@element-public/react-form-field@gmvdev/materials@infinitebrahmanuniverse/nolb-_mate@inovex.de/elements@lucasecdb/rmdc@mhamrah/svelte-material-ui@material/mwc-formfield@material/react-radio@emuanalytics/flow-rdf@mcwv/radio@mcwv/checkbox@materialr/checkbox@materials-elements/core@materials-elements/site@materials-ui/core@materials-ui/site@materialr/form-field@materialr/radio@materialr/switch@mdc-react/form-field@mdc-stencil/form-field@morioh/material@react-mdc/form-field@plonquo/ember-material-components@preact-material-components/form-field@rmwc/checkbox@rmwc/form-field@rmwc/formfield@openremote/or-input@openremote/or-mwc-components@pmwcs/formfield@pitaya-components/switch@pitaya-components/checkbox@pitaya-components/form-field@pitaya-components/list@pitaya-components/radio@o-rango/orango-material-design@robertkern/vue-materialreact-mdcuireact-mdcreact-material-web-componentspublish-work-spacepreact-material-componentspreact-material-components-mgrpug-material-designsnabbdom-material-componentsidm-reservation-search-results-details-libmaple-material-vuematerial-react-jsmaterial-imbamaterial-components-webmaterial-toolboxmcr-formfieldmdc-react-gumball@xdam/ember-partials@worm425/betsy-web-components@types/material__form-field@xolvio/plate-ui-commentsaapp-chat.jscomponents-library-v1closure-react-radiocore-react-componentsaurelia-mdc-uiaurelia-material-uibw-materialeasyfyv3-presentationdepsember-material-componentsember-cli-mdc-form-fieldgesdisc-components@smui/form-field@sme.up/ketchup
14.0.0

3 years ago

13.0.0

4 years ago

12.0.0

4 years ago

11.0.0

4 years ago

10.0.0

4 years ago

9.0.0

4 years ago

8.0.0

5 years ago

7.0.0

5 years ago

6.0.0

5 years ago

5.1.0

5 years ago

5.0.0

5 years ago

4.0.0

6 years ago

3.2.0

6 years ago

4.0.0-canary.1

6 years ago

4.0.0-canary.0

6 years ago

4.0.0-alpha.0

6 years ago

3.1.0

6 years ago

3.1.0-alpha.0

6 years ago

3.0.0

6 years ago

3.0.0-alpha.1

6 years ago

3.0.0-alpha.0

6 years ago

2.3.0

6 years ago

2.1.1

6 years ago

2.0.0

6 years ago

1.1.0

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago

1.0.0-1

6 years ago

1.0.0-0

6 years ago

0.44.1

6 years ago

0.44.0

6 years ago

0.43.0

6 years ago

0.42.0

7 years ago

0.41.0

7 years ago

0.40.1

7 years ago

0.40.0

7 years ago

0.39.3

7 years ago

0.39.2

7 years ago

0.39.1

7 years ago

0.39.0

7 years ago

0.39.0-0

7 years ago

0.38.1

7 years ago

0.38.0

7 years ago

0.37.1

7 years ago

0.37.0

7 years ago

0.36.0

7 years ago

0.36.0-0

7 years ago

0.35.0

7 years ago

0.34.1

7 years ago

0.34.0

7 years ago

0.33.0

7 years ago

0.32.0

7 years ago

0.31.0

7 years ago

0.30.0

7 years ago

0.29.0

7 years ago

0.28.0

7 years ago

0.27.0

8 years ago

0.26.0

8 years ago

0.25.0

8 years ago

0.24.0

8 years ago

0.23.0

8 years ago

0.2.17

8 years ago

0.2.16

8 years ago

0.2.15

8 years ago

0.2.14

8 years ago

0.2.13

8 years ago

0.2.12

8 years ago

0.2.11

8 years ago

0.2.10

8 years ago

0.2.9

8 years ago

0.2.8

8 years ago

0.2.7

8 years ago

0.2.6

8 years ago

0.2.5

8 years ago

0.2.4

8 years ago

0.2.3

8 years ago

0.2.2

8 years ago

0.2.1

8 years ago

0.2.0

8 years ago

0.1.1

8 years ago

0.1.0

9 years ago