# @material/mwc-formfield

> Material Design formfield web component

Latest version **0.27.0** (published 2022-08-12) · Apache-2.0 license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @material/mwc-formfield
pnpm add @material/mwc-formfield
yarn add @material/mwc-formfield
bun add @material/mwc-formfield
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.27.0 |
| Published | 2022-08-12 |
| First published | 2018-06-14 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 35.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11237 |
| Maintainers | yefim, abhiomkar, azakus, bicknellr, material-admin, aprigogin, patrickrodee, aomarks, emarquez, allanchen, esgonzalez, asyncliz, candysonya, ssuarez, taylorv |
| Keywords | material design, web components, formfield |

## Links

- npm: https://www.npmjs.com/package/@material/mwc-formfield
- Repository: https://github.com/material-components/material-components-web-components
- Homepage: https://github.com/material-components/material-components-web-components#readme
- Issues: https://github.com/material-components/material-components-web-components/issues
- npm.io page: https://npm.io/package/@material/mwc-formfield

## Dependencies (4)

- [lit](https://npm.io/package/lit.md) ^2.0.0
- [tslib](https://npm.io/package/tslib.md) ^2.0.1
- [@material/mwc-base](https://npm.io/package/@material/mwc-base.md) ^0.27.0
- [@material/form-field](https://npm.io/package/@material/form-field.md) =14.0.0-canary.53b3cad2f.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.27.0 (latest) — 2022-08-12
- 0.26.0-canary.0af8ade5.0 (canary) — 2022-02-07
- 0.26.1 — 2022-05-09
- 0.26.0 — 2022-05-03
- 0.26.0-canary.69ba13b7.0 — 2022-01-19
- 0.26.0-canary.893fc857.0 — 2022-01-07
- 0.26.0-canary.2afff08e.0 — 2022-01-06
- 0.26.0-canary.b9d35b69.0 — 2022-01-05
- 0.26.0-canary.e1bcf14e.0 — 2021-12-28
- 0.26.0-canary.cf7ba5a9.0 — 2021-12-10
- 0.26.0-canary.3b2452cc.0 — 2021-12-09
- 0.26.0-canary.0547aeeb.0 — 2021-12-06
- 0.26.0-canary.345c2bb9.0 — 2021-12-02
- 0.26.0-canary.8067ce28.0 — 2021-11-04
- 0.26.0-canary.448f6cb9.0 — 2021-11-04
- … 705 more at https://npm.io/package/@material/mwc-formfield/versions

## README

# `<mwc-formfield>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-formfield.svg)](https://www.npmjs.com/package/@material/mwc-formfield)
> IMPORTANT: The Material Web Components are a work in progress and subject to
> major changes until 1.0 release.

A form field is a text caption for MWC input elements including
[`<mwc-checkbox>`](https://github.com/material-components/material-web/tree/master/packages/checkbox),
[`<mwc-radio>`](https://github.com/material-components/material-web/tree/master/packages/radio),
and
[`<mwc-switch>`](https://github.com/material-components/material-web/tree/master/packages/switch).

It is equivalent to the native
[`<label>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)
element in that it forwards user interaction events to the input element. For example, tapping on the label causes the associated input element to toggle and focus.

[Material Design Guidelines: Selection controls](https://material.io/components/selection-controls/)

[Demo](https://material-components.github.io/material-web/demos/formfield/)

## Installation

```sh
npm install @material/mwc-formfield
```

> NOTE: The Material Web Components are distributed as ES2017 JavaScript
> Modules, and use the Custom Elements API. They are compatible with all modern
> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional
> tooling step is required to resolve *bare module specifiers*, as well as
> transpilation and polyfills for IE11. See
> [here](https://github.com/material-components/material-components-web-components#quick-start)
> for detailed instructions.

## Example usage

### With checkbox

<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/formfield/images/with_checkbox.png" width="105px" height="40px">

```html
<mwc-formfield label="Tomato">
  <mwc-checkbox checked></mwc-checkbox>
</mwc-formfield>

<script type="module">
  import '@material/mwc-checkbox/mwc-checkbox.js';
  import '@material/mwc-formfield/mwc-formfield.js';
</script>
```

### nowrap label with checkbox

<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/formfield/images/nowrap.png" width="150px" height="40px">

```html
<style>
  mwc-formfield[nowrap] {
    width: 150px;
  }
</style>
<mwc-formfield label="really really long label" nowrap>
  <mwc-checkbox></mwc-checkbox>
</mwc-formfield>

<script type="module">
  import '@material/mwc-checkbox/mwc-checkbox.js';
  import '@material/mwc-formfield/mwc-formfield.js';
</script>
```

### With Radio

<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/formfield/images/with_radio.png" width="94px" height="80px">

```html
<style>
  mwc-formfield {
    display: block;
  }
</style>

<mwc-formfield label="Home">
  <mwc-radio name="location" checked></mwc-radio>
</mwc-formfield>

<mwc-formfield label="Work">
  <mwc-radio name="location"></mwc-radio>
</mwc-formfield>

<script type="module">
  import '@material/mwc-radio/mwc-radio.js';
  import '@material/mwc-formfield/mwc-formfield.js';
</script>
```

### With Switch

<img src="https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/formfield/images/with_switch.png" width="160px" height="48px">

```html
<mwc-formfield label="Airplane mode">
  <mwc-switch checked></mwc-switch>
</mwc-formfield>

<script type="module">
  import '@material/mwc-switch/mwc-switch.js';
  import '@material/mwc-formfield/mwc-formfield.js';
</script>
```

## API

### Slots

Name      | Description
--------- | -----------
*default* | The input element that this form field provides a label for.


### Properties/Attributes

Name    | Type     | Description
------- | -------- | ----------------------------------
`label` | `string` | The text to display for the label and sets a11y label on input. (visually overriden by slotted label)
`alignEnd` | `boolean` | Align the component at the end of the label.
`spaceBetween` | `boolean` | Add space between the component and the label as the formfield grows.
`nowrap` | `boolean` | Prevents the label from wrapping and overflow text is ellipsed.

### Methods

*None*

### Events

*None*

### CSS Custom Properties

#### Global CSS Custom Properties

This component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)
custom properties.

| Name | Description
|----  | -----------
| `--mdc-typography-body2-<PROPERTY>` | Styles the typography of the formfield.

## Additional references

-   [MDC Web Form Fields](https://material.io/develop/web/components/input-controls/form-fields/)

---
_Source: https://npm.io/package/@material/mwc-formfield · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._