Yöte0.1.0
DocsGitHub1

input components for React.

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

$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.
(Optional)
This is a hint text to help users.
<Input
  size="md"
  label="Last name"
  required
  optional
  info="We only use this on your invoices."
  leading={<UserIcon />}
  trailing={<SearchIcon size={20} />}
  hint="This is a hint text to help users."
/>

Digit input

Inputs for codes, keys, pins, passwords etcs

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.
(Optional)
0/200
This is a hint text to help users.
<Textarea
  size="md"
  label="Input area"
  required
  optional
  info="We only use this to improve the product."
  maxLength={200}
  hint="This is a hint text to help users."
/>

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="/reset"
/>

Phone number

A dialling country and a national number, in one field

More parametersToggle each part of the field, or open its docs.
(Optional)
This is a hint text to help users.
<PhoneInput
  size="md"
  label="Phone number"
  required
  optional
  info="We only use this to secure your account."
  defaultCountry="US"
  hint="This is a hint text to help users."
/>

Select

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

Type to filter. The field is the search.
<SelectInput
  label="Country"
  options={[
    { value: 'fi', label: 'Finland' },
    { value: 'se', label: 'Sweden' },
  ]}
  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.
(Optional)
⌘ + S
Typed, not picked. Paste works too.
<DateInput
  size="md"
  label="Date"
  required
  optional
  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.
(Optional)
The mark follows the number. Try 5555 5555 5555 4444.
<CardInput
  size="md"
  label="Card number"
  required
  optional
  info="We never store the number."
  hint="The mark follows the number. Try 3782 822463 10005."
/>

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"
/>