14.0.0 • Published 5 months ago

@material/form-field v14.0.0

Weekly downloads
47,856
License
MIT
Repository
github
Last release
5 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/radiomaterial-components-web@everything-registry/sub-chunk-584pug-material-designpublish-work-space@o-rango/orango-material-design@robertkern/vue-material@rmwc/checkbox@rmwc/form-field@rmwc/formfield@openremote/or-input@preact-material-components/form-fieldstencil-todo-list@pitaya-components/checkbox@pitaya-components/form-field@pitaya-components/list@pitaya-components/radio@pitaya-components/switch@sme.up/ketchup@smui/form-field@lucasecdb/rmdcreact-material-web-componentsreact-mdcreact-mdcui@morioh/materialpreact-material-componentspreact-material-components-mgr@mcwv/checkbox@mcwv/radio@mdc-react/form-field@mdc-stencil/form-field@mhamrah/svelte-material-ui@material/mwc-formfield@materials-elements/site@materials-ui/core@materials-ui/site@materialr/radio@materialr/switch@materials-elements/core@materialr/checkbox@materialr/form-field@material/react-radio@react-mdc/form-fieldsolid-material-componentssnabbdom-material-componentssvmd@xolvio/plate-ui-comments@xdam/ember-partialstest-rsmdc@worm425/betsy-web-components@tylertech/forge@plonquo/ember-material-components@pmwcs/formfieldsvelte-arcadiaember-material-componentseasyfyv3-presentationdepsember-cli-mdc-form-fieldfrt-mth-webcomponentsgesdisc-componentsmaterial-imbamaterial-react-jsmcr-formfieldidm-reservation-search-results-details-libmaterial-toolboxmdc-react-gumballmaple-material-vue@emuanalytics/flow-rdf@inovex.de/elements@infinitebrahmanuniverse/nolb-_mate@gmvdev/materialsvegatroaurelia-mdc-uiaurelia-material-uivue-material-design-components@angular/material@angular/material-experimental@arterial/form-field@aurelia2-mdc-web/form-field@authentic/mwc-formfield@aurelia-mdc-web/form-field@types/material__form-fieldaapp-chat.js@betazuul/form-field@betsybot/betsy-web-components@bringhub/fabric.jsbw-materialclosure-react-radio@bitchin/react-material-webzarinpal-story-book@codeadraas/vue3-materialcomponents-library-v1@defense-unicorns/unicorn-ui@detachhead/smui-form-field@dev.mohe/mwc-formfieldcore-react-components
14.0.0

2 years ago

13.0.0

3 years ago

12.0.0

3 years ago

11.0.0

3 years ago

10.0.0

3 years ago

9.0.0

3 years ago

8.0.0

3 years ago

7.0.0

4 years ago

6.0.0

4 years ago

5.1.0

4 years ago

5.0.0

4 years ago

4.0.0

4 years ago

3.2.0

5 years ago

4.0.0-canary.1

5 years ago

4.0.0-canary.0

5 years ago

4.0.0-alpha.0

5 years ago

3.1.0

5 years ago

3.1.0-alpha.0

5 years ago

3.0.0

5 years ago

3.0.0-alpha.1

5 years ago

3.0.0-alpha.0

5 years ago

2.3.0

5 years ago

2.1.1

5 years ago

2.0.0

5 years ago

1.1.0

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago

1.0.0-1

5 years ago

1.0.0-0

5 years ago

0.44.1

5 years ago

0.44.0

5 years ago

0.43.0

5 years ago

0.42.0

5 years ago

0.41.0

5 years ago

0.40.1

6 years ago

0.40.0

6 years ago

0.39.3

6 years ago

0.39.2

6 years ago

0.39.1

6 years ago

0.39.0

6 years ago

0.39.0-0

6 years ago

0.38.1

6 years ago

0.38.0

6 years ago

0.37.1

6 years ago

0.37.0

6 years ago

0.36.0

6 years ago

0.36.0-0

6 years ago

0.35.0

6 years ago

0.34.1

6 years ago

0.34.0

6 years ago

0.33.0

6 years ago

0.32.0

6 years ago

0.31.0

6 years ago

0.30.0

6 years ago

0.29.0

6 years ago

0.28.0

6 years ago

0.27.0

6 years ago

0.26.0

6 years ago

0.25.0

6 years ago

0.24.0

6 years ago

0.23.0

7 years ago

0.2.17

7 years ago

0.2.16

7 years ago

0.2.15

7 years ago

0.2.14

7 years ago

0.2.13

7 years ago

0.2.12

7 years ago

0.2.11

7 years ago

0.2.10

7 years ago

0.2.9

7 years ago

0.2.8

7 years ago

0.2.7

7 years ago

0.2.6

7 years ago

0.2.5

7 years ago

0.2.4

7 years ago

0.2.3

7 years ago

0.2.2

7 years ago

0.2.1

7 years ago

0.2.0

7 years ago

0.1.1

7 years ago

0.1.0

7 years ago