@rmwc/formfield

Form Fields

MDC Form Field provides an mdc-formfield 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.

• Module @rmwc/formfield
• Import styles:
  • Using CSS Loader
    • import '@rmwc/formfield/styles';
  • Or include stylesheets
    • '@material/form-field/dist/mdc.form-field.css'
• MDC Docs: https://material.io/develop/web/components/input-controls/form-fields/

<FormField>
  <input type="checkbox" id="input" />
  <label htmlFor="input">Input Label</label>
</FormField>

Align end

<FormField alignEnd>
  <input type="checkbox" id="input" />
  <label htmlFor="input">Input Label</label>
</FormField>

No wrap

<FormField noWrap>
  <input type="checkbox" id="input" />
  <label htmlFor="input">Input Label</label>
</FormField>

Space between

<FormField spaceBetween>
  <input type="checkbox" id="input" />
  <label htmlFor="input">Input Label</label>
</FormField>

FormField

A FormField component.

Props

Name	Type	Description
alignEnd	boolean	Position the input after the label.
foundationRef	Ref<MDCFormFieldFoundation<>>	Advanced: A reference to the MDCFoundation.
noWrap	boolean	Forces text to stay on a single line.
spaceBetween	boolean	Adds space between content.

Changelog

14.3.2 (2024-08-15)

🩹 Fixes

• select: defaultvalue sets correct textcontent (debb20b5)
• select: correctly emit onChange events (1dea9a06)
• select: pass disabled prop properly (86e7d477)

❤️ Thank You

• Emilie