nili/ui
enfaartr
All components

TextInput

Overview
27 exports8 variant axes134 props9 files
import { CounterInput, DigitInput, InlineInput, InputSelect, TagInput, TextInput } from '@nili/ui';

This is the library’s own overview page, rendered live. Switch the language or the theme in the header and it follows.

Types

Twelve presets from the Figma page. Each sets keyboard, autofill and direction for the kind of value being asked for. Adornments are slots — startIcon, endIcon, startAffix, endAffix, select, button, emojiPicker.

This is a hint text to help user.

This is a hint text to help user.

This is a hint text to help user.

This is a hint text to help user.

https://

This is a hint text to help user.

$

This is a hint text to help user.

This is a hint text to help user.

This is a hint text to help user.

This is a hint text to help user.

This is a hint text to help user.

This is a hint text to help user.

This is a hint text to help user.

import {
  TextInput,
  InputSelect,
  Icon,
  Button,
  CompactButton,
} from "@nili/ui"
import { RiMailLine, RiSearchLine, RiBankCardLine } from "@remixicon/react"

export function Example() {
  return (
    <>
      <TextInput
        type="email"
        label="Email Address"
        sublabel="(Optional)"
        information
        hint="This is a hint text to help user."
        placeholder="hello@nili.design"
        startIcon={<Icon icon={RiMailLine} />}
        required
      />

      <TextInput
        type="phone"
        label="Phone Number"
        select={
          <InputSelect icon={<span>🇺🇸</span>} aria-label="Country code">
            +1
          </InputSelect>
        }
      />

      <TextInput type="website" label="Website" startAffix="https://" />

      <TextInput
        type="amount"
        label="Amount"
        prefix="$"
        select={
          <InputSelect icon={<span>🇪🇺</span>} aria-label="Currency">
            EUR
          </InputSelect>
        }
      />
    </>
  )
}

States & sizes

Default, filled, disabled and error across the three sizes. Hover and focus are CSS states, so they are not drawn here.

Size matrix · email · search · amount
$
$
$
import { TextInput } from "@nili/ui"

export function Example() {
  return (
    <>
      <TextInput label="Default" placeholder="Enter text..." />
      <TextInput label="Filled" defaultValue="hello@nili.design" type="email" />
      <TextInput label="Disabled" defaultValue="Locked" disabled />
      <TextInput
        label="Error"
        defaultValue="not-an-email"
        type="email"
        error="Enter a valid email address"
      />
      <TextInput size="sm" label="Small" />
      <TextInput size="xs" label="X-Small" />
    </>
  )
}

Tag Input

A specialized field for creating and managing tags. Enter or comma commits; Backspace on an empty field removes the last one.

  • Berlin
  • London
  • Paris

Press Enter to add a tag

  • Tehran
import { TagInput } from "@nili/ui"

export function Example() {
  return (
    <TagInput
      label="Cities"
      hint="Press Enter to add a tag"
      defaultValue={["Berlin", "London", "Paris"]}
      placeholder="Add a city..."
      dismissLabel="Remove"
    />
  )
}

Counter Input

A numeric field with increment and decrement controls attached to it.

2

Between 1 and 10

2

Between 1 and 10

2

Between 1 and 10

import { CounterInput } from "@nili/ui"

export function Example() {
  return (
    <CounterInput
      label="Guests"
      hint="Between 1 and 10"
      defaultValue={2}
      min={1}
      max={10}
      decrementLabel="Decrease"
      incrementLabel="Increase"
    />
  )
}

Digit Input

Captures numeric data one digit at a time — one-time codes and PINs. Paste fills the whole set.

We sent a code to your phone

import { DigitInput } from "@nili/ui"

export function Example() {
  return (
    <>
      <DigitInput
        length={4}
        label="Verification code"
        hint="We sent a code to your phone"
        groupLabel="Verification code"
        cellLabel={(index, total) => `Digit ${index} of ${total}`}
      />
      <DigitInput
        length={6}
        error={t('f.codeWrong')}
        defaultValue="123"
        groupLabel="PIN"
        cellLabel={(index, total) => `Digit ${index} of ${total}`}
      />
    </>
  )
}

Inline Input

A compact field for editing data in place. The border only appears on hover and focus — it reads as text until you touch it.

import { InlineInput, Icon, CompactButton } from "@nili/ui"
import { RiUser3Line, RiPencilLine } from "@remixicon/react"

export function Example() {
  return (
    <InlineInput
      label="Display name"
      placeholder="Enter a name"
      defaultValue="Ada Lovelace"
      startIcon={<Icon icon={RiUser3Line} />}
      button={
        <CompactButton appearance="ghost" size="md" aria-label="Edit">
          <Icon icon={RiPencilLine} />
        </CompactButton>
      }
    />
  )
}