# @smui/touch-target

> Svelte Material UI - Touch Target

Latest version **9.0.2** (published 2026-08-03) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @smui/touch-target
pnpm add @smui/touch-target
yarn add @smui/touch-target
bun add @smui/touch-target
```

## Health

**Score 70/100 (B)** — status: active.

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

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 9.0.2 |
| Published | 2026-08-03 |
| First published | 2021-04-15 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 52 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3444 |
| Author | Hunter Perrin |
| Maintainers | hperrin |
| Keywords | svelte, svelte3, material-ui, material-design, material, svelte-components, sveltejs |

## Links

- npm: https://www.npmjs.com/package/@smui/touch-target
- 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/@smui/touch-target

## Dependencies (1)

- [@smui/common](https://npm.io/package/@smui/common.md) ^9.0.2

## 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
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 9.0.2 (latest) — 2026-08-03
- 9.0.0-beta.14 (beta) — 2026-05-16
- 8.0.0-alpha.0 (alpha) — 2024-05-13
- 9.0.1 — 2026-06-02
- 9.0.0 — 2026-05-20
- 9.0.0-beta.13 — 2026-05-16
- 9.0.0-beta.12 — 2026-04-21
- 9.0.0-beta.11 — 2026-04-21
- 9.0.0-beta.10 — 2026-04-21
- 9.0.0-beta.9 — 2026-04-21
- 9.0.0-beta.8 — 2026-04-21
- 9.0.0-beta.7 — 2026-04-21
- 9.0.0-beta.6 — 2026-04-21
- 9.0.0-beta.5 — 2026-04-21
- 9.0.0-beta.4 — 2026-04-21
- … 74 more at https://npm.io/package/@smui/touch-target/versions

## README

# Svelte Material UI - Touch Target

A touch target is the area that extends beyond the visible boundary of an interactive element that still responds to touch inputs. According to the Material Design spec, touch targets should be no less than 48px x 48px in size. SMUI provides a `touch` prop on the following components that will increased their touch target.

- Button
- Chips
- Checkbox
- Radio
- Mini FAB
- Segmented Button

This component provides a wrapper to ensure that collapsing margins don't cause touch targets to overlap.

# Installation

```sh
npm install --save-dev @smui/touch-target
```

# Examples and Usage Information

https://sveltematerialui.com/demo/touch-target

# Exports

## (default)

A fragment used as a touch target wrapper.

Equivalent to the [`ClassAdder` with `Div` common component](/packages/common/README.md#classaddersvelte).

# More Information

See [Layout and typography](https://m2.material.io/design/usability/accessibility.html#layout-and-typography) in the Material design spec.

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