Yöte1.0.0
DocsGitHub22

input components for React.

Every state designed, every transition tuned, every edge case handled. Install it and the field already feels right.

Zero dependencies24KBTypeScript

$npmiyote-ui

Text input

One line, with room at either end for a mark or an affix

More parametersToggle each part of the field, or open its docs.
As it appears on your card.
<Input
  size="md"
  label="Last name"
  required
  info="We only use this on your invoices."
  leading={<UserIcon />}
  trailing={<SearchIcon size={20} />}
  hint="As it appears on your card."
/>

Digit input

One-time codes and PINs, one cell at a time

More parametersToggle each part of the field, or open its docs.
Enter the code we sent you.
<PinInput
  length={4}
  label="Verification code"
  hint="Enter the code we sent you."
  onComplete={verify}
/>

Text area

Multi-line entry, with a counter and a drag handle

More parametersToggle each part of the field, or open its docs.
0/200
Drag the corner to resize. The counter is yours to cap.
<Textarea
  size="md"
  label="Input area"
  required
  info="We only use this to improve the product."
  maxLength={200}
  hint="Drag the corner to resize. The counter is yours to cap."
/>

Password

Masked entry, with a reveal toggle and live requirements

More parametersToggle each part of the field, or open its docs.
Forgot password

Must contain at least:

  • At least 1 symbol, not met
  • At least 1 uppercase, not met
  • At least 1 number, not met
  • At least 8 characters, not met
<PasswordInput
  size="md"
  label="Password"
  info="Use something you have not used elsewhere."
  forgotHref="/docs/password#requirements"
/>

Phone number

A dialling country and a national number, in one field

More parametersToggle each part of the field, or open its docs.
The country and the number come back as two values.
<PhoneInput
  size="md"
  label="Phone number"
  required
  info="We only use this to secure your account."
  defaultCountry="US"
  hint="The country and the number come back as two values."
/>

Select

A field that is its own search, and a small inline one

Type to filter. The field is the search.
<SelectInput
  size="md"
  label="Country"
  options={COUNTRIES}
  hint="Type to filter. The field is the search."
/>

Date

Typed, not picked. The field types the slashes

More parametersToggle each part of the field, or open its docs.
⌘ + S
Typed, not picked. Paste works too.
<DateInput
  size="md"
  label="Date"
  required
  info="We only use this to schedule the run."
  shortcut="⌘ + S"
  hint="Typed, not picked. Paste works too."
/>

Card number

Regroups itself as it recognises the card

More parametersToggle each part of the field, or open its docs.
The mark follows the number. Try 5555 5555 5555 4444.
<CardInput
  size="md"
  label="Card number"
  required
  info="We never store the number."
  hint="The mark follows the number. Try 5555 5555 5555 4444."
/>

Tags

A list you build by typing, inside the field or under it

(Optional)
  • Carrots
  • Onions
  • Tomatoes
Enter or a comma adds one. Backspace on an empty field removes the last.
<TagsInput
  label="Ingredients"
  tagsPosition="outside"
  value={tags}
  onChange={setTags}
  placeholder="Type and press Enter"
/>