# @s-ui/react-atom-input > > Inputs are the text fields that users fill in with different types of information. These include dates, passwords or even short answers. It’s a field where users can write alphanumeric texts. Latest version **5.51.0** (published 2025-09-08) · MIT license · 0 weekly downloads ## Install ```sh npm install @s-ui/react-atom-input pnpm add @s-ui/react-atom-input yarn add @s-ui/react-atom-input bun add @s-ui/react-atom-input ``` ## Health **Score 35/100 (D)** — status: stable. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: stale. ## Facts | | | |---|---| | Version | 5.51.0 | | Published | 2025-09-08 | | First published | 2018-09-05 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 3 | | Unpacked size | 40.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, 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, input | ## Links - npm: https://www.npmjs.com/package/@s-ui/react-atom-input - 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+input%22 - npm.io page: https://npm.io/package/@s-ui/react-atom-input ## Dependencies (3) - [react-imask](https://npm.io/package/react-imask.md) 6.4.3 - [@s-ui/react-hooks](https://npm.io/package/@s-ui/react-hooks.md) 1 - [@s-ui/react-primitive-polymorphic-element](https://npm.io/package/@s-ui/react-primitive-polymorphic-element.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 - 5.51.0 (latest) — 2025-09-08 - 5.22.0-beta.0 (beta) — 2022-10-26 - 5.50.0 — 2025-08-12 - 5.49.0 — 2025-08-04 - 5.48.0 — 2025-08-04 - 5.47.0 — 2025-06-20 - 5.46.0 — 2025-06-03 - 5.45.0 — 2025-05-20 - 5.44.0 — 2025-03-17 - 5.43.0 — 2025-03-12 - 5.42.0 — 2025-02-24 - 5.41.0 — 2025-02-06 - 5.40.0 — 2025-02-05 - 5.39.0 — 2025-02-05 - 5.38.0 — 2025-02-04 - … 97 more at https://npm.io/package/@s-ui/react-atom-input/versions ## README # AtomInput > Inputs are the text fields that users fill in with different types of information. These include dates, passwords or even short answers. It’s a field where users can write alphanumeric texts. [![documentation](https://img.shields.io/badge/read%20the%20doc-black?logo=readthedocs)](https://sui-components.vercel.app/workbench/atom/input/) [![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,input) [![npm](https://img.shields.io/npm/dt/%40s-ui/react-atom-input?logo=npm&labelColor=black)](https://www.npmjs.com/package/@s-ui/react-atom-input) [![Issues open](https://img.shields.io/github/issues-search/SUI-Components/sui-components?query=is%3Aopen%20label%3Acomponent%20label%3Ainput&logo=openbugbounty&logoColor=red&label=issues%20open&color=red)](https://github.com/SUI-Components/sui-components/issues?q=is%3Aopen+label%3Acomponent+label%3Ainput) [![NPM](https://img.shields.io/npm/l/%40s-ui%2Freact-atom-input)](https://github.com/SUI-Components/sui-components/blob/main/components/atom/input/LICENSE.md) ## Installation ```sh ƛ npm install @s-ui/react-atom-input --save ``` ## Usage ### Add styles To use the component's own styles, create a .scss file and import them inside. ```scss @import '~@s-ui/react-atom-input/lib/index'; ``` If you want to customize your components, create your own theme and add it to your component just **before**. ```scss @import 'custom-settings'; @import '~@s-ui/react-atom-input/lib/index'; ``` ### You can use native types like this ```js import AtomInput from '@s-ui/react-atom-input' return // possible type options: text, number, date and password ``` ### Non native Inputs #### SUI-Password In order to use SUI defined Password Input pass the prop `type='sui-password'` to the Input component. ```js import AtomInput from '@s-ui/react-atom-input' return ``` #### Mask Wraps the https://unmanner.github.io/imaskjs/ lib, used if the input must follow a regex or a specific format/pattern . Using `type='mask'` activates this input, which will be expecting the `mask` prop type to be passed by. ```js const bankAccountMask = { // checkout all options here https://unmanner.github.io/imaskjs/guide.html mask: 'ES00 0000 0000 00 0000000000' } return ``` ### Sizes There are defined 3 sizes (`MEDIUM`, `SMALL` and `XSMALL`) available at the exported object `inputSizes` and that can be set through the prop `size` Related size Sass vars are: ```scss $h-atom-input--m: 40px; $h-atom-input--s: 32px; $h-atom-input--xs: 24px; ``` ```js ``` ### Addons > [What are addons?](https://paper.dropbox.com/doc/SUI-Input-03mHJFkOCjviSZevsaTwm#:uid=125362683844628624581838&h2=Icons-and-addons-inside-the-in) Addons are passed as prop, use **leftAddon** or **rightAddon** in order to set the position inside the Input #### Addon usage ```js import AtomInput from '@s-ui/react-atom-input' return ``` ### Icons Icons are passed as prop, use **leftIcon** or **rightIcon** in order to set the position inside the Input ```js import AtomInput from '@s-ui/react-atom-input' const logo = 'my_logo.svg' const leftIcon = () => ``` You can also pass a handler for each Icon using the props **onClickLeftIcon** or **onClickRightIcon** ```js alert('clicked right icon')} /> ``` ### Error states There are 3 error states: - error state = **true**, will show a **red** border around the input field - error state = **false**, will show a **green** border around the input field - error state = **null**, will show the by **default** border around the input field ```js ``` ### Input states There are 3 error states: - input state = **'error'**, will show a **red** border around the input field - input state = **'success'**, will show a **green** border around the input field - input state = **'alert'**, will show a **orange** border around the input field - input state = **null**, will show the by **default** border around the input field ```js ``` ### Form Usage Each field returns its value on every onChange event so you can save it inside your form state. ```jsx import React from 'react' import ReactDOM from 'react-dom' import Input from '@s-ui/react-atom-input' import Button from '@s-ui/react-atom-button' class SimpleLoginForm extends React.Component { constructor() { super() this.state = { email: { value: '', errorState: null }, password: { value: '', errorState: null } } this.onChange = this.onChange.bind(this) this.onSubmit = this.onSubmit.bind(this) this.onBlur = this.onBlur.bind(this) } isEmail(value) { return /(.+)@(.+){2,}\.(.+){2,}/.test(value) } onChange({value, field}) { this.setState( Object.assign({}, this.state, { [field]: { value, errorState: null } }) ) } onBlur({value, field}) { let errorState = !this.isEmail(value) this.setState({ [field]: {errorState, value} }) } onSubmit(ev) { ev.preventDefault() ev.stopPropagation() window.alert(JSON.stringify(this.state)) } render() { const {email, password} = this.state return (
this.onChange({value, field: 'email', ev})} onBlur={ev => this.onBlur({value: ev.target.value, field: 'email'})} errorState={this.state.email.errorState} /> this.onChange({value, field: 'password', ev})} />
) } } ``` --- _Source: https://npm.io/package/@s-ui/react-atom-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._