---
title: "ViraStack Password: Erişilebilir Şifre Görünürlüğü"
description: "Şifre göster/gizle davranışını erişilebilir varsayılanlarla sunar; ikon veya metin etiketleriyle özelleştirilebilir."
url: https://omergulcicek.com/blog/virastack-password
author: "Ömer Gülçiçek"
published: 2026-08-02
language: tr
tags: ["ViraStack","React"]
note: "Interactive demos are left out of this Markdown copy; open the url for the full post."
---

# ViraStack Password: Erişilebilir Şifre Görünürlüğü

Şifre alanında "göster / gizle" neredeyse standart bir beklenti; çoğu ekip bunu bir önceki projeden kopyalar veya birkaç satırlık `useState` ile çözer. Sorun görünürlük state'inin kendisi değil: ekran okuyucuya durumu bildirmemek, formu yanlışlıkla submit eden bir düğme, disabled input varken hâlâ tıklanabilen bir göz ikonu. Bunlar canlıda geç fark edilir hatalar. Asistanla sıfırdan ürettirmek de mümkün; fakat her seferinde aynı erişilebilirlik checklist'ini yeniden tarif etmek ve çıktıyı elle doğrulamak zorunda kalırsınız. Ortak, belgelenmiş bir hook bu tekrarı kısaltır.

**ViraStack Password** (`@virastack/password`) tam bu noktada devreye giriyor. Headless bir hook: `inputProps` ve `btnProps` verir, stil ve markup size kalır. Varsayılan göz ikonlarıyla hemen çalışır; isterseniz metin etiketine veya kendi ikonlarınıza geçersiniz.

## Ne Yapıyor?

**ViraStack Password**, şifre görünürlüğünü yönetir. `useViraPassword` görünürlük state'ini tutar, input `type`'ını senkronlar ve toggle düğmesine ARIA özniteliklerini ekler. `disabled` / `readOnly` durumunda düğme de kilitlenir. Prop birleştirme sayesinde kendi `className`, `autoComplete` veya olay işleyicileriniz hook çıktısının üzerine güvenle eklenir.

## Şifre görünürlüğü örneği

Aşağıda iki yaygın kullanım var: varsayılan ikonlu toggle ve **Göster** / **Gizle** metin etiketli sürüm. Durum satırından görünürlüğün nasıl değiştiğini izleyebilirsiniz.

## Nasıl kullanılır?

```bash
npm install @virastack/password
```

```tsx
import { useViraPassword } from "@virastack/password"

function Example() {
  const { inputProps, btnProps } = useViraPassword()

  return (
    <div className="relative">
      <input {...inputProps} placeholder="Şifrenizi girin" />
      <button {...btnProps} />
    </div>
  )
}
```

Metin etiketli sürüm için `icons` seçeneği yeterlidir:

```tsx
const { inputProps, btnProps } = useViraPassword({
  icons: {
    show: "Göster",
    hide: "Gizle"
  }
})
```

Aynı hook ile **özel ikonlar**, *disabled* / *readOnly* senkronu veya programatik `toggle()` / `setVisible()` da kullanılabilir. shadcn, Ant Design veya Chakra gibi UI kütüphanelerine props yayarak bağlanır - ekstra bir form framework zorunluluğu yoktur.

Kurulum, API ve canlı örnekler için [virastack.com/password](https://virastack.com/password) adresine, örnekler listesine [buradan](https://www.virastack.com/tr/password/docs/examples), kaynak kod için [github.com/virastack/password](https://github.com/virastack/password) deposuna bakabilirsiniz.

ViraStack ürünleri açık kaynak ve ücretsiz. Destek olmak isterseniz [GitHub](https://github.com/virastack) üzerinde bir yıldız bırakabilirsiniz - ekosistemin daha çok kişiye ulaşmasına yardımcı olur.