Input
FREEBaş/son ikon, temizle düğmesi, şifre göster/gizle, karakter sayacı ve boyut seçenekleri olan metin alanı.
Canlı düzenle
Ayarları değiştir; bileşen ve kodu anında güncellensin.
Ayarlar
Kod
import { Search } from "lucide-react";
import { Input } from "@/components/ui/input";
<Input
placeholder="Search components…"
clearable
startIcon={<Search />}
/>Kurulum
Terminal
npx @bloxa/cli add input
# or: npx shadcn@latest add @bloxa/inputÖrnekler
İkonlar
Temizlenebilir
Şifre
type="password" olunca göster/gizle düğmesi otomatik gelir.
Karakter sayacı
0/60
Boyutlar
API
Her bileşen, oluşturduğu HTML elemanının özelliklerini de kabul eder.
Input
| Özellik | Tip | Varsayılan | Açıklama |
|---|---|---|---|
| startIcon | ReactNode | — | Alanın başındaki ikon veya metin. |
| endIcon | ReactNode | — | Alanın sonundaki ikon veya metin. |
| clearable | boolean | false | Değer varken temizle düğmesi gösterir. |
| showCount | boolean | false | maxLength ile birlikte karakter sayacı gösterir. |
| size | "sm" | "md" | "lg" | "md" | Yükseklik ve yazı boyutu. |
| labels | { clear?, showPassword?, hidePassword? } | — | Düğmelerin erişilebilir adları (çeviri için). |