# @detachhead/smui-form-field

> Svelte Material UI - Form Field

Latest version **7.0.0-beta.0-7aa154b58dd17d39757ade237397a003da4f0bdc** (published 2022-11-25) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @detachhead/smui-form-field
pnpm add @detachhead/smui-form-field
yarn add @detachhead/smui-form-field
bun add @detachhead/smui-form-field
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 7.0.0-beta.0-7aa154b58dd17d39757ade237397a003da4f0bdc |
| Published | 2022-11-25 |
| First published | 2022-11-23 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 97.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3443 |
| Author | Hunter Perrin |
| Maintainers | detachhead |
| Keywords | svelte, svelte3, material-ui, material-design, material, svelte-components, sveltejs |

## Links

- npm: https://www.npmjs.com/package/@detachhead/smui-form-field
- Repository: https://github.com/hperrin/svelte-material-ui
- Homepage: https://github.com/hperrin/svelte-material-ui#readme
- Issues: https://github.com/hperrin/svelte-material-ui/issues
- npm.io page: https://npm.io/package/@detachhead/smui-form-field

## Dependencies (5)

- [svelte2tsx](https://npm.io/package/svelte2tsx.md) ^0.5.12
- [@material/rtl](https://npm.io/package/@material/rtl.md) ^14.0.0
- [@material/form-field](https://npm.io/package/@material/form-field.md) ^14.0.0
- [@detachhead/smui-common](https://npm.io/package/@detachhead/smui-common.md) ^7.0.0-beta.0
- [@material/feature-targeting](https://npm.io/package/@material/feature-targeting.md) ^14.0.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 7.0.0-beta.0-7aa154b58dd17d39757ade237397a003da4f0bdc (latest) — 2022-11-25
- 7.0.0-alpha.0 (canary) — 2022-11-23
- 7.0.0-beta.0-bde6dbb20b13d0f01bfbfb6daf901b112a786afe — 2022-11-23
- 7.0.0-beta.0-da72427f50f3b64dca46e0a9d9504524848cfb0e — 2022-11-23

## README

# Svelte Material UI - Form Field

A wrapper to align an input and its label.

MDC Form Fields make the Input/Label RTL-aware and also activates a ripple effect.

# Installation

```sh
npm install --save-dev @smui/form-field
```

# Examples and Usage Information

https://sveltematerialui.com/demo/form-field

# Exports

## (default)

A Form Field component.

### Props / Defaults

- `use`: `[]` - An array of Svelte actions and/or arrays of an action and its options.
- `class`: `''` - A CSS class string.
- `align`: `'start'` - Where to align the input. ('start' or 'end')
- `inputId`: `(programatically assigned)` - The ID of the input the label is to be associated with.

The ID is generated using a module context counter, so you don't need to provide one yourself. The format is `SMUI-form-field-{counter}`, and the counter starts at 0.

### Forwarded Props

- `label$` - Props forwarded to the label element.

# More Information

See [Form Field](https://github.com/material-components/material-components-web/tree/v14.0.0/packages/mdc-form-field) in MDC-Web for information about the upstream library's architecture.

---
_Source: https://npm.io/package/@detachhead/smui-form-field · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._