# @s-ui/react-atom-label

> > The Label is the name of the associated field, that explains what is the about. It should be clear, concise and short.

Latest version **1.34.0** (published 2025-11-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install @s-ui/react-atom-label
pnpm add @s-ui/react-atom-label
yarn add @s-ui/react-atom-label
bun add @s-ui/react-atom-label
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.34.0 |
| Published | 2025-11-03 |
| First published | 2018-04-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 9.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 147 |
| Maintainers | alejandro.ferrante, ivanmlaborda, salvador.juan, andresin87.adevinta, izeller, gfabregoadv, a.ferrer, ignacio_navarro, oscar_ramirez, jordi.munoz, joanleon-adv, aitor.rodriguez, luis-garrido, jenifer.lopez, isabelgomez87, pa.chruscinski.ext, schibstedspain, alfredo.arronte, belen.santos, xavi_ballestar, ferrangbtw, sabri-castelli, jamile.radloff, davidmartin2108, sergi.quintela, estefania_garcia, carlosvillu-adevinta, miriam-gil, arnau.guell, ferran.simon, victor.perez.adevinta, mariapaula.forero.ext, oscar.gomez, david.nieto, oriol.puig, nacho_torrella, xavi.murcia, ignacio.rodriguez, francisco.ruiz.lloret, sziauberyte, alfredo.zimperz, andresadv, javiauso, alverd004, marian.lucaci, pablogs, alisa_bayanova, cristhianb, sergiocollado, pablo.rey-adevinta, beatrizip, alex.castells, david.cuadrado.ext, giovanny.sayas.ext, patricio.sartore, azahara, marc.benito, sergio.escano, cristina.rodriguez.duque, pol.valls, frandelacasa-adevinta, carolina.mallo.ext, daniel.perez.ext, hpintos_adevinta, carlos.gonzalezl, albert.peiro, oscar-raig-adevinta, thomas.page.ext, sebastian.badea.adevinta, victoria.pasichnyk.ext, sendami.luque.ext, luz_adv, alfredo.narvaez, ruben-martin, dann41, emiliovz, adria.velardos, arturo.vicente, diegomr, sergi.martinez.adevinta, guillemgc3, frontend-jobs, javiermiguel, atilioscolaroadv, crotundu.adevinta, candymd, florinz, denis_z, anya_ok, hector-prieto-moreno, mirceasima-adv, biancamateiu-adv |
| Keywords | @s-ui, react, component, atom, label |

## Links

- npm: https://www.npmjs.com/package/@s-ui/react-atom-label
- Repository: https://github.com/SUI-Components/sui-components
- Homepage: https://sui-components.vercel.app/
- Issues: https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3A%22Component%3A+label%22
- npm.io page: https://npm.io/package/@s-ui/react-atom-label

## Dependencies (2)

- [@s-ui/js-compiler](https://npm.io/package/@s-ui/js-compiler.md) 1
- [@s-ui/component-dependencies](https://npm.io/package/@s-ui/component-dependencies.md) 1

## 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

- 1.34.0 (latest) — 2025-11-03
- 1.33.0-beta-0 (beta) — 2025-10-28
- 1.33.0 — 2025-10-03
- 1.32.0 — 2025-03-10
- 1.31.0 — 2025-03-07
- 1.30.0 — 2025-01-27
- 1.29.0 — 2025-01-25
- 1.28.0 — 2025-01-21
- 1.27.0 — 2025-01-17
- 1.26.0 — 2025-01-17
- 1.25.0 — 2024-05-15
- 1.24.0 — 2024-05-06
- 1.23.0 — 2022-10-17
- 1.22.0 — 2022-09-29
- 1.21.0 — 2022-06-30
- … 20 more at https://npm.io/package/@s-ui/react-atom-label/versions

## README

# AtomLabel

> The Label is the name of the associated field, that explains what is the about. It should be clear, concise and short.

[![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/atom/label/)
[![issue](https://img.shields.io/badge/report%20a%20bug-black?logo=openbugbounty&logoColor=red)](https://github.com/SUI-Components/sui-components/issues/new?&projects=4&template=bug-report.yml&assignees=&template=report-a-bug.yml&title=🪲+&labels=bug,component,atom,label)
[![npm](https://img.shields.io/npm/dt/%40s-ui/react-atom-label?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-atom-label)

[![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3Alabel&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3Alabel)
[![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-atom-label)](https://github.com/SUI-Components/sui-components/blob/main/components/atom/label/LICENSE.md)

## Installation

```sh
$ npm install @s-ui/react-atom-label --save
```

## Usage

### Basic usage
Labels are shown on top of the input form elements by default due to their block type display. Use `inline = 'left'` or `inline = 'right'` props to make them inline. 
```js
import AtomLabel from '@s-ui/react-atom-label'

return (
  <div>
    <AtomLabel
      name='atomLabelName'
      for='labelName'
      text='Hello label'
      optional='(optional text)'
      inline='( left || right )'
      type='alert' />

    <input id='atomLabelName' type='text' />
  </div>
)
```


> **Find full description and more examples in the [demo page](https://sui-components.now.sh/workbench/atom/label/demo).**

---
_Source: https://npm.io/package/@s-ui/react-atom-label · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._