Getting started

Yöte is a small set of form inputs for React, styled and animated out of the box, with one prop vocabulary shared by every field. Zero dependencies.

Installation

Install the package from your command line.

$npmiyote-ui

Usage

Import the stylesheet once, wherever you keep global styles. Everything in it lives inside @layer yote, so your own utilities always win.

app/layout.tsx

import 'yote-ui/styles.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Then render a field. Nothing else to wire up.

verify-form.tsx

import { PinInput } from 'yote-ui'

export function VerifyForm() {
  return (
    <PinInput
      label="Verification code"
      hint="Enter the code we sent you."
      onComplete={(code) => verify(code)}
    />
  )
}

Components

9 so far. They all take the same props, so every one after the first needs no new learning. The vocabulary is the whole API, and each page only documents what that field adds to it.

Text input: one line, with room at either end for a mark or a text affix.
Digit input: one-time codes and PINs. Paste, autofill and the SMS suggestion all work.
Text area: multi-line entry with a counter, a drag handle and three sizes.
Password: masked entry with a reveal toggle and a requirements block you define.
Phone number: a dialling country and a national number, kept as two values.
Select: a field that is its own search, and a small one that sits inside another field.
Tags: a list you build by typing, under the field or inside it.
Date: typed, not picked. The field types the punctuation for you.
Card number: regroups itself as it recognises the card, and the mark changes with it.

Scope

Yöte does fields. Not form state, not validation logic, and not the things that sit on top of a field rather than in it: there is a date field but no calendar, a select field but no combobox library, a card field but no card validator. Validation state is accepted as a prop, and the library renders your error without ever deciding what one is.

A narrow library that is finished beats a broad one that is forty percent done. When a feature would need the library to hold state, guess a locale or decide whether something is correct, that is the line.

A message from the founder

Hey, thank you for checking out Yöte. It's from the word syöte, meaning input in Finnish. I hope you enjoy using it, and if there's anything on here you feel could be better, or you want to make a feature request, feel free to send me an email at shatermt@gmail.com or shoot me a DM on Twitter. Don't forget to give the project a star on GitHub. Thank you!

Shater