rci “react code input”
better segmented code inputs for the web. primary goals:
- improved accessibility
- operating system integration
- consistent, cross-platform, experience
rci uses a single DOM input element, overlayed on top of plain
divs for styling. most other implementations of this pattern are based on multiple inputs.
using a single input (rci approach) allows for:
- native keyboard shortcuts and selection (including selecting multiple segments)
- improved accessibility (
This repository hosts a few npm packages, the most relevant ones being:
use-code-input: low-level hook handling selection via ref
rci: opinionated component (
CodeInput) built on top of
most users will be better served by using rci, as the internals of this component won’t vary much from app to app.
the hook package is intended for usage only in design system projects which wish to retain absolute control of rendered DOM elements.
packages in this repo don’t bundle any built-in style, besides the base minimum for it to function (zIndex, positioning, etc).
for styling you can pass a top-level
className directly to
CodeInput, all DOM elements rendered by
CodeInput contain a
data-code-input attribute that can be used to target them individually.
despite not being part of the primary goals, weight is heavily considered while developing.
there’s currently no support for displaying separators between sequences (example:
for simplicity of implementation and to reduce the amount of CSS the user needs to provide, this component assumes a font with fixed advances for the characters accepted.
this means using a monospaced or tabular lining font for numeric values.
for alphanumeric values the font must be monospaced.
this project is still pending a thorough a11y validation.
for cases in which accessibility is paramount, please use a simple native single input.