# Suomi.fi tasarım sistemi

## Suomi.fi tasarım sistemi Arayüz Önizlemesi

Bir PDF deneyin, desteklenmeyen bir dosyayı reddedin ve seçili belgeyi kaldırın. Dosyalar tarayıcınızda kalır.

## Suomi.fi tasarım sistemi Tasarım Başvurusu

Resmî belgeler, incelenen belirteç deposu ve suomifi-ui-components 18.0.0 meta verileri. Önizleme özgün bir yorumdur; yerel React çalışma zamanı değildir.

### Tipografi

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Family | Source Sans 3 | 18. sürüm; 17. sürüm ve öncesinde Source Sans Pro kullanılıyordu. Yazı tiplerini ayrıca yükleyin. |
| Body text | 18px | Mobilde ve masaüstünde aynı varsayılan değer. |
| Small body | 16px | Text için smallScreen görünümü; otomatik bir görünüm alanı kuralı değildir. |
| Lead | 22px / 20px smallScreen | Her görünümde tek bir giriş metni kullanın; her paragraf için lead kullanmayın. |
| Weights | 300 / 400 / 600 | Bileşen paketinin gerektirdiği yazı tipi dosyaları. |
### Boşluklar ve yüzeyler

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Space scale | 5, 10, 15, 20, 25, 30, 40, 60, 80px | İncelenen depo JSON dosyasında xxs'ten xxxxl'ye kadar. |
| Inset scale | 2, 4, 6, 8, 10, 16, 20px | insetXxs ile insetXxl arası; dış boşluk ölçeği değildir. |
| Basic radius | 2px | Depodaki radius.basic; büyük bir kart köşesi olduğu sonucunu çıkarmayın. |
| Highlight base | hsl(212, 63%, 45%) | Varsayılan etkileşim mavisi. |
| Highlight dark 1 | hsl(212, 63%, 37%) | Daha koyu etkileşim rolü. |
| Highlight light 2 | hsl(212, 63%, 90%) | Açık yüzey rolü; seçilen metin rengine karşı kontrastı doğrulayın. |
### FileInput düzeni ve dil

| Ad / Kural | Değer / Yapılandırma | Kullanım |
| --- | --- | --- |
| Default maximum width | 600px | Bileşene özgü genişlik; tüm siteyi kapsayan bir ızgara değildir. |
| fullWidth | Boolean layout option | Form gerektirdiğinde üst öğenin genişliğine yayılmasını sağlayın. |
| smallScreen | Explicit compact presentation option | Bu özellikten genel ve otomatik bir kırılma noktası kuralı çıkarmayın. |
| Single selection | Chosen file replaces picker and drop area | Birden fazla seçim, dosyaların aşağıda listelendiği ayrı bir kalıptır. |
| Required copy roles | labelText, hintText, dragAreaText, removeFileText, addedFileAriaText | Her rolü yerelleştirin; yalnızca dosya adı, erişilebilir bir duyuru için yeterli değildir. |
## Suomi.fi tasarım sistemi Eksiksiz Kılavuz

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

## Suomi.fi tasarım sistemi Uygulama sınırı

### React bileşen sistemi

> Suomi.fi, styled-components ile biçimlendirilen React bileşenleri ve ayrı bir belirteç paketi sunar. 18. sürümde beklenen yazı tipi Source Sans 3 olarak değiştirilmiştir. 17. sürümdeki mevcut sayfalar Source Sans Pro kullanıyor olabilir; paket sürümünü kontrol etmeden bu sayfaların ekran görüntülerini karşılaştırmak, yazı tipiyle ilgili hatalı bir düzeltmeye yol açabilir.

Gömülü önizleme, belgelenmiş tek dosya kalıbının açıkça etiketlenmiş bir HTML/CSS yorumu olmaya devam eder. Aşağıda doğrulanmış geri çağırımı, denetlenen değeri, bağımlılıkları ve yazı tipi içe aktarımlarıyla ayrı bir yerel React FileInput örneği de verilmiştir. Bunlar aynı yerel seçim görevinin iki ayrı uygulamasıdır; yerel örnek, gömülü HTML önizlemeyi geriye dönük olarak React bileşenine dönüştürmez.

Destekleyici belirtimi okuyun

## Suomi.fi tasarım sistemi Tipografi ve yazı tipi yükleme

### Metinleri okunabilir tutun

Hem mobilde hem masaüstünde belgelenmiş 18px gövde metni boyutunu kullanın. Dar bir görünüm alanı, tüm form açıklamalarını küçültmek için gerekçe değildir. Küçük metin görünümü 16px'tir ve ikincil bilgiler içindir. Lead metni 22px'tir; kompakt görünümde 20px'e düşer. Yalnızca sayfa girişinde kullanın.

Satır kaydırmalarını karşılaştırmadan önce gerekli yazı tipi kalınlıklarını yükleyin. Bileşen paketi Source Sans 3 dosyalarını beklerken bu bağımsız önizleme bilinçli olarak Arial kullanır. Bu değişiklik önizleme notunda belirtilmiştir ve yerel bileşenin birebir görüntüsü olarak sunulmamalıdır.

Destekleyici belirtimi okuyun

## Suomi.fi tasarım sistemi Boşluk ve genişlik

### Birbirinden farklı iki boşluk ölçeği

Belirteç kaynağı, normal boşlukları iç boşluklardan ayırır. İncelenen JSON'da normal l değeri 25px'tir; l değerini 32px olarak tanımlayan eski bir README örneğini kopyalamayın. İç boşluklar 2px'ten başlar ve farklı bir dizide ilerler. Stil oluştururken yüklenen sürümün gerçek dışa aktarımlarını kullanın.

FileInput için belgelenmiş 600px azami genişlik ve fullWidth seçeneği vardır. Bu, bileşene özgü bir kısıtlamadır; sayfa kapsayıcısının her yerde 600px olması gerektiğini göstermez. Belge kabul formu, açıklayıcı metni etiketine yakın tutarken alanı daha geniş bir düzene yerleştirebilir.

Destekleyici belirtimi okuyun

## Suomi.fi tasarım sistemi Dosya seçici yapısı

### Metinler bileşen sözleşmesinin bir parçasıdır

Görünür etiket, istenen belgeyi adlandırır. İpucu, kişi dosya seçiciyi açmadan önce desteklenen biçimleri, dosya boyutunu ve adet sınırını açıklar. Bırakma alanı işaretçiyle kullanılabilecek bir kısayol sunar, ancak dosya girişinin yerini almamalıdır. Resmî yönergelerde, seçme denetiminin gizli yerel dosya girişinin etiketi olduğu belirtilir.

Tek dosya modunda seçilen belge, seçicinin ve bırakma alanının yerini alır. Belgenin yanına belirgin bir kaldırma eylemi koyun. Birden çok dosya modu farklı bir liste düzeni kullanır; tek dosya isteyen bir isteğe ek dosyaları sessizce eklemeyin.

- labelText: yalnızca “Yükle” demek yerine istenen kanıtı veya belgeyi adlandırın.

- removeFileText: kaldırma eylemini dosya bağlamında anlaşılır hâle getirin.

- addedFileAriaText: dosya adı duyurulmadan önce seçim bağlamını belirtin.

Destekleyici belirtimi okuyun

## Suomi.fi tasarım sistemi Seçim ve kurtarma

### Yerel ek durumu makinesi

Örnek, boyutu 5.000.000 baytı aşmayan tek bir PDF dosyasını kabul eder. Bunlar bu atölye senaryosu için seçilmiş uygulama kurallarıdır; paket varsayılanları veya resmî Suomi.fi yükleme politikası değildir. Tarayıcının accept filtresi yalnızca dosya seçiciye ipucu verir; örnek, seçim veya bırakma sonrasında dosya adını ve boyutunu ayrıca denetler.

Geçersiz meta verilerde dosya seçici kullanılabilir durumda kalır ve nasıl düzeltileceği açıklanır. Geçerli bir seçimde ad, textContent kullanılarak gösterilir; bayt sayısı bildirilir ve odak kaldırma denetimine taşınır. Dosyanın kaldırılması, temel giriş değerini temizler, dosya seçiciyi yeniden gösterir ve odağı geri taşır; böylece aynı dosya tekrar seçilebilir.

1. Tam olarak bir dosya seçin veya bırakın; birden çok dosyayı belirli bir mesajla reddedin.

2. Yerel örnek kurallarını denetleyin ve hata mesajını ya da seçilen dosya adını duyurun.

3. Eki kaldırın ve özgün seçim kontrolünü yeniden görüntüleyin.

Destekleyici belirtimi okuyun

## Suomi.fi tasarım sistemi Yerel entegrasyon

### Uyumlu bağımlılık kümesini yükleyin

Yayımlanan 18.0.0 sürümündeki FileInput uygulaması, onChange işlevini React değişiklik olayıyla değil, bir FileList ile çağırır. Denetimli value değeri, dosya öğesi nesnelerinden oluşan bir dizidir; örnekte kabul edilen her File, { file } nesnesine dönüştürülür. Yerleşik kaldırma işlemi listeyi değiştirdiğinde de aynı geri çağırma çalışır; bu nedenle boş bir FileList, denetimli diziyi temizler. Bu sözleşmeler, yayımlanan dist/esm/core/Form/FileInput/FileInput.js modülünde kontrol edilmiştir.

İlk görüntülemeden itibaren value değerini denetimli tutmak için boş bir diziyle başlayın. Gelen FileList değerini bu diziye dönüştürmeden önce doğrulayın. Bu örnek, adları .pdf ile bitmeyen veya boyutu 5.000.000 baytı aşan dosyaları reddeder ve ret durumunda seçimi temizler. Bunlar örneğe özgü yerel kurallardır; güvenlik denetimi veya Suomi.fi ilkesi değildir. Gerçek bir yüklemeyi kabul etmeden önce sunucu tarafında içerik doğrulaması yine de gereklidir.

Aşağıdaki yerel örnek, Source Sans 3'ü 400 ve 600 ağırlıklarında yükler, React öğesini açıkça belirtilmiş bir kök öğeye bağlar ve kitaplık üzerinden styled-components kullanır. tslib bağımlılığını açıkça ekleyin: 18.0.0 ESM modülleri yardımcılarını içe aktarır ve bu bağımlılık olmadan temiz derleme başarısız olur. Aşağıdaki sabitlenmiş kurulum, eksik çalışma zamanı bağımlılığını ve yazı tipi varlıklarını içerir. Bu varsayılan temalı örnek için ek bir tema sağlayıcısı gerekmez.

Destekleyici belirtimi okuyun

### Doğrulanmış belirteç dışa aktarımlarını kullanın

Resmî stiller kılavuzunda suomifiDesignTokens.spacing ve suomifiDesignTokens.colors örnekleri gösterilir. Aşağıdaki örnek, özel bir sarmalayıcı için bu dışa aktarılan yolları kullanır; FileInput iç işleyişinin yerine geçen bir uygulama değildir.

```
import { suomifiDesignTokens } from 'suomifi-design-tokens';
// Real exported token paths. Use values instead of copying README example numbers.
const attachmentStyle = {
  maxWidth: 600,
  padding: suomifiDesignTokens.spacing.m,
  borderColor: suomifiDesignTokens.colors.highlightBase
};
```

Kod referansı

Destekleyici belirtimi okuyun

## Suomi.fi tasarım sistemi Erişilebilirlik ve duyarlı kullanım

### Alanı sürükleme gerektirmeden kullanın

Bırakma alanı belirgin olsa bile klavyeyle kullanılabilen yerel bir dosya girişini koruyun. İpucu ve hata metinlerini aria-describedby ile ilişkilendirin. Sayfanın tamamını yeniden okutmak yerine seçim değişikliklerini ve kaldırma işlemini duyurun. Bir formda aynı türden birden fazla denetim bulunabilecekse kaldırma düğmesi, seçili dosyayı tanımlamalıdır.

Resmî smallScreen özelliği kompakt bir görünüm sağlar. Genel bir kesme noktası tanımlamaz. Bu bağımsız önizleme, gövde metnini 18px'te tutarken uygulamaya özgü 480px dolgu ayarlaması kullanır. Uzun dosya adlarını, yakınlaştırmayı ve çevrilmiş etiketleri test edin; dosya adlarını, tüm sayfayı genişletmeyecek şekilde satıra bölün.

Destekleyici belirtimi okuyun

## Suomi.fi tasarım sistemi Üretim sorumlulukları

### Seçilen dosya, yüklenmiş dosya demek değildir

Demo, belge içeriğini okumaz veya istek göndermez. Seçilen dosya adı ve bayt sayısı, belgenin geçerli olduğunu, saklandığını ya da kabul edildiğini kanıtlamaz. Gerçek hizmetlerde sunucu tarafında doğrulama, yükleme ilerlemesi, kurtarılabilir hata yönetimi, saklama kuralları ve gerçek bir yanıta bağlı onay gerekir.

Bileşen kodu MIT lisansına sahiptir. Bu kod lisansı, bağımsız bir projeye kendisini Finlandiya devlet hizmeti olarak tanıtma veya kısıtlı kurumsal kimliği kullanma yetkisi vermez. Denemeler için tarafsız bir proje adı kullanın; resmî bir uygulama geliştiriyorsanız uygun marka yönergelerini edinin.

Destekleyici belirtimi okuyun

## Suomi.fi tasarım sistemi Bileşen Örnekleri

### Resmî belirteç dışa aktarımlarını kullanın

Özel bir sarmalayıcı için doğrulanmış boşluk ve renk dışa aktarım yolları.

```
import { suomifiDesignTokens } from 'suomifi-design-tokens';
// Real exported token paths. Use values instead of copying README example numbers.
const attachmentStyle = {
  maxWidth: 600,
  padding: suomifiDesignTokens.spacing.m,
  borderColor: suomifiDesignTokens.colors.highlightBase
};
```

Kod referansı

### Tek dosya seçimi ve kaldırma

Tamamen yerel yorumlama. PDF ve boyut sınırları senaryo tercihidir; yükleme yapılmaz.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Attachment example</title><style>*{box-sizing:border-box}body{margin:0;padding:30px 20px;font:18px/1.5 Arial,sans-serif;color:#202020;background:#fff}main{max-width:600px;margin:auto}h1{font-size:32px;line-height:1.2;font-weight:400;margin:0 0 20px}p{margin:0 0 20px}label{font-weight:600;display:block}small{display:block;font-size:16px}.drop{margin-top:15px;border:2px dashed hsl(212,63%,45%);padding:30px;text-align:center;background:hsl(212,63%,90%)}button,input::file-selector-button{font:600 18px Arial;padding:12px 20px;border:1px solid hsl(212,63%,37%);border-radius:2px;background:hsl(212,63%,45%);color:white;cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #202020;outline-offset:3px}input{width:100%;font-size:16px;margin:15px 0}input::file-selector-button{margin-right:10px}.file{border:1px solid #777;padding:20px;margin:20px 0;overflow-wrap:anywhere}.file button{margin-top:15px;background:white;color:hsl(212,63%,37%)}#error{color:#a32020;font-weight:bold}footer{font-size:14px;margin-top:30px;border-top:1px solid #ccc;padding-top:15px}[hidden]{display:none!important}@media(max-width:480px){body{padding:20px 15px}.drop{padding:20px}h1{font-size:28px}}</style><main><small>COMMUNITY WORKSHOP · ATTACHMENT</small><h1>Add your project outline</h1><p>Choose one PDF up to 5 MB. This local example checks file metadata; it does not read or send the document.</p><div id="picker"><label for="file">Project outline</label><small id="hint">One PDF file. Maximum 5 MB (5,000,000 bytes).</small><input id="file" type="file" accept=".pdf,application/pdf" aria-describedby="hint error"><div class="drop" id="drop">Or drop one PDF here</div></div><p id="error" role="alert" hidden></p><section id="selected" class="file" hidden aria-label="Selected attachment"><strong id="name"></strong><small id="size"></small><button id="remove" type="button">Remove file</button></section><p id="status" role="status">No file selected.</p><footer>OpenDesign interpretation of the Suomi.fi attachment pattern. Arial fallback; no official identity or React component runtime. PDF and 5 MB are example rules.</footer></main><script>const input=document.querySelector('#file'),picker=document.querySelector('#picker'),selected=document.querySelector('#selected'),error=document.querySelector('#error'),status=document.querySelector('#status');function choose(files){error.hidden=true;if(files.length!==1){error.textContent='Choose exactly one file.';error.hidden=false;input.value='';return}const file=files[0];if(!/\.pdf$/i.test(file.name)||file.size>5000000){error.textContent='Choose a PDF no larger than 5 MB.';error.hidden=false;input.setAttribute('aria-invalid','true');input.value='';return}input.removeAttribute('aria-invalid');document.querySelector('#name').textContent=file.name;document.querySelector('#size').textContent=file.size.toLocaleString('en')+' bytes · selected locally';document.querySelector('#remove').setAttribute('aria-label','Remove '+file.name);picker.hidden=true;selected.hidden=false;status.textContent='Selected file: '+file.name;document.querySelector('#remove').focus()}input.addEventListener('change',()=>{if(input.files.length)choose(input.files)});document.querySelector('#drop').addEventListener('dragover',e=>e.preventDefault());document.querySelector('#drop').addEventListener('drop',e=>{e.preventDefault();choose(e.dataTransfer.files)});document.querySelector('#remove').onclick=()=>{input.value='';picker.hidden=false;selected.hidden=true;error.hidden=true;input.removeAttribute('aria-invalid');status.textContent='File removed. Choose another file.';input.focus()};</script></html>
```

Kod referansı

- Yerel React bileşeni değildir.

- Üretim hizmetinde dosya içeriğini sunucuda doğrulayın.

### Denetimli doğrulama kullanan yerel FileInput

main.jsx olarak kaydedin. Bu üç dosya ve kurulum komutları, yerel React örneğini birlikte yeniden oluşturur.

```
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { FileInput } from 'suomifi-ui-components';
import '@fontsource/source-sans-3/400.css';
import '@fontsource/source-sans-3/600.css';
import './app.css';
function App() {
  const [value, setValue] = useState([]);
  const [error, setError] = useState('');
  function change(files) {
    const next = Array.from(files);
    const invalid = next.length > 1 || next.some(file => !/\.pdf$/i.test(file.name) || file.size > 5000000);
    if (invalid) {
      setValue([]);
      setError('Choose one PDF no larger than 5 MB.');
      return;
    }
    setValue(next.map(file => ({ file })));
    setError('');
  }
  return <main><h1>Select a workshop document</h1><p>This local example does not upload or read the document.</p>
    <FileInput id="document" labelText="Workshop document" hintText="One PDF, maximum 5 MB (5,000,000 bytes)."
      inputButtonText="Choose PDF" dragAreaText="or drop a PDF here" removeFileText="Remove file"
      addedFileAriaText="Selected file" accept=".pdf" value={value} onChange={change}
      status={error ? 'error' : 'default'} statusText={error} />
    <p role="status">{value.length ? `${value[0].file.name} selected locally.` : 'No file selected.'}</p>
  </main>;
}
createRoot(document.getElementById('root')).render(<App />);
```

Kod referansı

- Doğrulamayı uygulama yönetir; yerel bileşen ise seçim, kaldırma ve erişilebilir dosya kontrollerini sağlar.

### Yerel örnek sayfa düzeni

app.css olarak kaydedin. Bu üç dosya ve kurulum komutları, yerel React örneğini birlikte yeniden oluşturur.

```
body{margin:0;font:18px/1.5 'Source Sans 3',sans-serif;color:#292929;background:#fff}main{max-width:600px;margin:0 auto;padding:24px}h1{font-size:32px;line-height:1.2}*{box-sizing:border-box}
```

Kod referansı

- Doğrulamayı uygulama yönetir; yerel bileşen ise seçim, kaldırma ve erişilebilir dosya kontrollerini sağlar.

### Yerel örneğin bağlandığı öğe ve oluşturulan varlıklar

index.html olarak kaydedin. Bu üç dosya ve kurulum komutları, yerel React örneğini birlikte yeniden oluşturur.

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Native Suomi.fi FileInput</title><link rel="stylesheet" href="./app.css"><div id="root"></div><script type="module" src="./app.js"></script></html>
```

Kod referansı

- Doğrulamayı uygulama yönetir; yerel bileşen ise seçim, kaldırma ve erişilebilir dosya kontrollerini sağlar.

## Suomi.fi tasarım sistemi Agent Kurulumu

### Uygulamaya Başlangıç Noktası

Bu kurulum, yerel Source Sans 3 yazı tipi dosyaları da dâhil olmak üzere aşağıdaki yerel React örneğini oluşturur. Geçersiz biçim, geçerli seçim, yerleşik kaldırma ve 390px ile 1440px ekranlarda boyutu sınırı aşan bir PDF ile test edilmiştir. Mevcut indirilebilir önizleme ZIP'i ayrı bir HTML/CSS yorumlamasıdır; README dosyası hâlâ geçerlidir.

```
npm install --save-exact suomifi-ui-components@18.0.0 react@18.3.1 react-dom@18.3.1 styled-components@6.5.3 tslib@2.8.1 @fontsource/source-sans-3@5.3.0
npm install --save-dev --save-exact esbuild@0.28.2
# Save main.jsx, app.css and index.html from the complete examples below.
npx esbuild main.jsx --bundle --outdir=dist --entry-names=app --loader:.woff=copy --loader:.woff2=copy
cp index.html dist/index.html
python3 -m http.server 8080 --directory dist
# Open http://localhost:8080
```

### Projeniz İçin Bir İstem

```
Sağlanan yerel Suomi.fi FileInput 18.0.0 React örneğini; Source Sans 3 ve tslib dâhil sabitlenmiş çalışma zamanı bağımlılıklarıyla kullanın. value değerini { file } nesnelerinden oluşan bir dizi olarak denetleyin ve onChange işlevinde FileList değerini doğrudan alın; bu geri çağırmada event.target değerini okumayın. Yerel seçimi kabul etmeden önce biçimi ve boyutu doğrulayın, kaldırma işleminin oluşturduğu boş listeyi işleyin ve ipucu ile hata metinlerini görünür tutun. Gömülü HTML önizlemesini ayrı etiketlenmiş bir yorumlama olarak ele alın. İki uygulama da dosya yüklemez; sunucu doğrulaması, ilerleme durumu ve saklamanın onaylanması için gerçek bir arka uç sözleşmesi gerekir.
```

## Suomi.fi tasarım sistemi Kaynaklar ve Kapsam

Gömülü önizleme ve indirilebilir ZIP, OpenDesign HTML/CSS yorumlamasıdır. Ayrı ve eksiksiz React örneği, suomifi-ui-components 18.0.0 sürümünü ve doğrulanmış FileInput value ile onChange sözleşmelerini kullanır. Her iki örnek de yerel dosya seçimini işler; hiçbiri belgeyi sunucuya yüklemez veya orada saklamaz.

- FileInput kılavuzu Anatomi, metin rolleri, genişlikler ve tekli/çoklu seçim davranışı.

- Tipografi Source Sans 3 ve sürüm geçişi.

- Text bileşeni Gövde, küçük ve giriş metni boyutları.

- Belirteç kaynağı Gerçek boşluk, renk ve yarıçap değerleri.

- Bileşen deposu React uygulaması, bağımlılıklar ve MIT lisansı.

- Çalışan örneğin tamamını indirin Tam HTML, yerel CSS/JavaScript bağımlılıklarını, sağlanan lisansları ve başlatma talimatlarının tam hâlini içeren ZIP. Derleme adımı gerekmez.

- Doğrulanmış FileInput 18.0.0 uygulaması Yayımlanan paket kaynağı: dist/esm/core/Form/FileInput/FileInput.js. Denetimli value ve FileList geri çağırma sözleşmeleri bu sürümde kontrol edildi ve ayrı bir yerel derlemede çalıştırılarak sınandı.

## Suomi.fi tasarım sistemi İlgili Kaynaklar

### UNDP tasarım sistemi

UNDP’nin yayımladığı renk ve boşluk belirteçlerini, klavyeyle kullanılabilen yerel sekmeleri ve yerel inceleme ilerlemesini içeren eksiksiz bir atölye okuma örneğini keşfedin.

### USWDS

Aranabilir bir fırsat karşılaştırma arayüzünde USWDS boşluk belirteçlerini, tema rollerini, anlamsal tabloları ve yerel akordeonları bir araya getirin.

### VA tasarım sistemi

VA’nın anlamsal belirteçleri ve yerel Process List bileşeniyle anlaşılır hizmet akışları oluşturun: görünür adım açıklamaları, anlamlı durum etiketleri ve ana akışı okunaklı tutan ek ayrıntılar.


- [Uygulama başvurusu](https://designsystem.suomi.fi/components/fileinput/)
- [Kaynak](https://designsystem.suomi.fi/components/text/)
- [Kaynak](https://github.com/vrk-kpa/suomifi-design-tokens/blob/master/src/tokens.json)
- [Kaynak](https://designsystem.suomi.fi/components/fileinput/)
- [Destekleyici belirtimi okuyun](https://github.com/vrk-kpa/suomifi-ui-components)
- [Destekleyici belirtimi okuyun](https://designsystem.suomi.fi/components/text/)
- [Destekleyici belirtimi okuyun](https://github.com/vrk-kpa/suomifi-design-tokens/blob/master/src/tokens.json)
- [Destekleyici belirtimi okuyun](https://designsystem.suomi.fi/components/fileinput/)
- [Destekleyici belirtimi okuyun](https://www.npmjs.com/package/suomifi-ui-components/v/18.0.0)
- [Kod referansı](https://designsystem.suomi.fi/styles)
- [Destekleyici belirtimi okuyun](https://designsystem.suomi.fi/styles)
- [Kod referansı](https://designsystem.suomi.fi/components/fileinput/)
- [Kod referansı](https://www.npmjs.com/package/suomifi-ui-components/v/18.0.0)
- [FileInput kılavuzu Anatomi, metin rolleri, genişlikler ve tekli/çoklu seçim davranışı.](https://designsystem.suomi.fi/components/fileinput/)
- [Tipografi Source Sans 3 ve sürüm geçişi.](https://designsystem.suomi.fi/styles/typography/)
- [Text bileşeni Gövde, küçük ve giriş metni boyutları.](https://designsystem.suomi.fi/components/text/)
- [Belirteç kaynağı Gerçek boşluk, renk ve yarıçap değerleri.](https://github.com/vrk-kpa/suomifi-design-tokens/blob/master/src/tokens.json)
- [Bileşen deposu React uygulaması, bağımlılıklar ve MIT lisansı.](https://github.com/vrk-kpa/suomifi-ui-components)
- [Doğrulanmış FileInput 18.0.0 uygulaması Yayımlanan paket kaynağı: dist/esm/core/Form/FileInput/FileInput.js. Denetimli value ve FileList geri çağırma sözleşmeleri bu sürümde kontrol edildi ve ayrı bir yerel derlemede çalıştırılarak sınandı.](https://www.npmjs.com/package/suomifi-ui-components/v/18.0.0)