@material/form-field
Advanced tools
Material Components for the web wrapper for laying out form fields and labels next to one another
MDC Form Field aligns an MDC Web form field (for example, a checkbox) with its label and makes it RTL-aware. It also activates a ripple effect upon interacting with the label.
npm install @material/form-field
Use the mdc-form-field element to wrap any combination of adjacent input and label elements of MDC Web form controls, such as MDC Checkbox or MDC Radio. Here's an example with MDC Checkbox:
<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">
...
</div>
</div>
<label for="my-checkbox">This is my checkbox</label>
</div>
NOTE: MDC Form Field is not intended for cases where a label and input are already handled together in a component's styles and logic. For example, MDC Text Field already manages a label and input together under its own root element.
If you are using MDC Form Field with an MDC Web component that has a ripple effect, you can instantiate MDCFormField and set its input property to activate the ripple effect upon interacting with the label. Here is an example with MDC Checkbox:
import {MDCFormField} from '@material/form-field';
import {MDCCheckbox} from '@material/checkbox';
const formField = new MDCFormField(document.querySelector('.mdc-form-field'));
const checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));
formField.input = checkbox;
See Importing the JS component for more information on how to import JavaScript.
By default, the input will be positioned before the label. You can position the input after the label by adding the mdc-form-field--align-end class:
<div class="mdc-form-field mdc-form-field--align-end">
<div class="mdc-checkbox">
<input type="checkbox" id="my-checkbox" class="mdc-checkbox__native-control"/>
<div class="mdc-checkbox__background">
...
</div>
</div>
<label for="my-checkbox">This is my checkbox</label>
</div>
If the label text is too long for a single line, it will wrap the text by default. You can force the text to stay on a single line and ellipse the overflow text by adding the mdc-form-field--nowrap class:
<div class="mdc-form-field mdc-form-field--nowrap">
<div class="mdc-checkbox">
<input type="checkbox" id="my-checkbox" class="mdc-checkbox__native-control"/>
<div class="mdc-checkbox__background">
...
</div>
</div>
<label for="my-checkbox">This some really really really long text</label>
</div>
MDCFormField Properties and Methods| Property | Value Type | Description |
|---|---|---|
input | String | Gets and sets the form field input. |
In order for the label ripple integration to work correctly, the input property needs to be set to a valid instance of an MDC Web input element which exposes a ripple getter. No action is taken if the input property is not set or the input instance doesn't expose a ripple getter.
If you are using a JavaScript framework, such as React or Angular, you can create a Form Field for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.
MDCFormFieldAdapter| Method Signature | Description |
|---|---|
registerInteractionHandler(type: string, handler: EventListener) => void | Adds an event listener handler for event type type to the label. |
deregisterInteractionHandler(type: string, handler: EventListener) => void | Removes an event listener handler for event type type to the label. |
activateInputRipple() => void | Activates the ripple on the input element. Should call activate on the input element's ripple property. |
deactivateInputRipple() => void | Deactivates the ripple on the input element. Should call deactivate on the input element's ripple property. |
14.0.0 (2022-04-27)
unset is unsupported in IE. (f460e23)validateTooltipWithCaretDistances method. (3e30054)theme-styles mixin... the value being retreived from the $theme map and css property name was swapped. The mixin would request font-size/font-weight/letter-spacing from the $theme map (which expects size/weight/tracking)... so these values would always be null. (32b3913)attachTo. (05db65e)showTimeout is not set (indicating that this tooltip is about to be re-shown). (6ca8b8f)minRange param to range sliders to request a minimum gap between the two thumbs. (8fffcb5)valueToAriaValueTextFn and valueToValueIndicatorTextFn functions are called for. (b6510c8)PiperOrigin-RevId: 444830518
PiperOrigin-RevId: 419837612
FAQs
Material Components for the web wrapper for laying out form fields and labels next to one another
We found that @material/form-field demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 15 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket and Seal Security collaborate to fix a critical npm overrides bug, resolving a three-year security issue in the JavaScript ecosystem's most popular package manager.
Security News
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.