2.34 #Components.TextInput Text Input
Pole tekstowe z label, helper text, ikony (left/right). Stany: empty, disabled, locked, locked-edit, error. Wariant textarea.
Examples
Default styling
Pole jest wymagane
.text-input--disabled
Wyłączony (20% opacity)
Pole jest wymagane
.text-input--locked
Read-only (szare tło, brak bordera)
Pole jest wymagane
.text-input--locked-edit
Locked + link "Edytuj"
Pole jest wymagane
.text-input--error
Czerwony border + helper text
Pole jest wymagane
Markup: text-input.html
<div style="display: flex; flex-direction: column; gap: 24px; max-width: 460px;">
<div class="text-input">
<label class="text-input__label">Default</label>
<div class="text-input__body">
<input class="text-input__field" placeholder="Wpisz tekst..." />
</div>
</div>
<div class="text-input text-input--error">
<label class="text-input__label">Error</label>
<div class="text-input__body">
<input class="text-input__field" value="Błędna wartość" />
</div>
<div class="text-input__helper">
<span class="text-input__helper-text">Pole jest wymagane</span>
</div>
</div>
<div class="text-input text-input--disabled">
<label class="text-input__label">Disabled</label>
<div class="text-input__body">
<input class="text-input__field" value="Wyłączony" disabled />
</div>
</div>
<div class="text-input text-input--locked">
<label class="text-input__label">Locked</label>
<div class="text-input__body">
<input class="text-input__field" value="jan.kowalski@email.com" readonly />
</div>
</div>
</div>
Source:
src/scss/components/_text-input.scss, line 1