# @material/mwc-notched-outline

> Material Design notched outline 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-notched-outline
pnpm add @material/mwc-notched-outline
yarn add @material/mwc-notched-outline
bun add @material/mwc-notched-outline
```

## Health

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

Negative: deprecated.

## Facts

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

## Links

- npm: https://www.npmjs.com/package/@material/mwc-notched-outline
- 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-notched-outline

## 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/notched-outline](https://npm.io/package/@material/notched-outline.md) =14.0.0-canary.53b3cad2f.0

## 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
- … 692 more at https://npm.io/package/@material/mwc-notched-outline/versions

## README

# `<mwc-notched-outline>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-notched-outline.svg)](https://www.npmjs.com/package/@material/mwc-notched-outline)

> IMPORTANT: The Material Web Components are a work in progress and subject to
> major changes until 1.0 release.

`<mwc-notched-outline>` is an element that is not meant to be consumed
externally. It is the outline element that can create a notch that is used in
outlined textfields and dropdown menus.

[Material Design Guidelines: textfields](https://material.io/design/components/text-fields.html)

[Material Design Guidelines: exposed dropdown menu](https://material.io/design/components/menus.html#exposed-dropdown-menu)

### CSS Custom Properties

| Name                                           | Default       | Description
| ---------------------------------------------- | ------------- |------------
| `--mdc-theme-primary`                          | `#6200ee`     | Color of a floating, slotted `FloatingLabel` and outline.
| `--mdc-shape-small`                            | `4px`         | Radius of the border.
| `--mdc-notched-outline-stroke-width`           | `1px`         | Outline width.
| `--mdc-notched-outline-notch-offset`           | `0`           | Padding-top to apply to notch when open to compensate for border width box size
| `--mdc-notched-outline-border-color`           | none          | Sets the border / outline color.

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