nili/ui
enfaartr
Tüm bileşenler

TextInput

Genel görünüm
27 export8 varyant ekseni134 prop9 dosya
import { CounterInput, DigitInput, InlineInput, InputSelect, TagInput, TextInput } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Türler

Figma sayfasından on iki ön ayar. Her biri klavyeyi, otomatik doldurmayı ve yönü istenen değer türüne göre ayarlar. Süslemeler yuvadır — startIcon, endIcon, startAffix, endAffix, select, button, emojiPicker.

Bu, kullanıcıya yardımcı olacak bir ipucu metnidir.

Bu, kullanıcıya yardımcı olacak bir ipucu metnidir.

Bu, kullanıcıya yardımcı olacak bir ipucu metnidir.

Bu, kullanıcıya yardımcı olacak bir ipucu metnidir.

https://

Bu, kullanıcıya yardımcı olacak bir ipucu metnidir.

$

Bu, kullanıcıya yardımcı olacak bir ipucu metnidir.

Bu, kullanıcıya yardımcı olacak bir ipucu metnidir.

Bu, kullanıcıya yardımcı olacak bir ipucu metnidir.

Bu, kullanıcıya yardımcı olacak bir ipucu metnidir.

Bu, kullanıcıya yardımcı olacak bir ipucu metnidir.

Bu, kullanıcıya yardımcı olacak bir ipucu metnidir.

Bu, kullanıcıya yardımcı olacak bir ipucu metnidir.

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>
        }
      />
    </>
  )
}

Durumlar ve boyutlar

Üç boyutta varsayılan, dolu, devre dışı ve hata. Üzerine gelme ve odak CSS durumlarıdır, bu yüzden burada çizilmez.

Boyut matrisi · e‑posta · arama · tutar
$
$
$
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" />
    </>
  )
}

Etiket girdisi

Etiket oluşturup yönetmek için özel bir alan. Enter ya da virgül ekler; boş alanda Backspace sonuncuyu kaldırır.

  • Berlin
  • London
  • Paris

Etiket eklemek için Enter’a basın

  • 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"
    />
  )
}

Sayaç girdisi

Artırma ve azaltma denetimleri iliştirilmiş sayısal bir alan.

2

1 ile 10 arasında

2

1 ile 10 arasında

2

1 ile 10 arasında

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

Rakam girdisi

Sayısal veriyi rakam rakam alır — tek kullanımlık kodlar ve PIN’ler. Yapıştırma tüm kümeyi doldurur.

Telefonunuza bir kod gönderdik

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}`}
      />
    </>
  )
}

Satır içi girdi

Veriyi yerinde düzenlemek için derli toplu bir alan. Kenarlık yalnızca üzerine gelince ve odakta belirir — dokunana dek metin gibi okunur.

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>
      }
    />
  )
}