TextField
Jednoliniowe pole z etykietą: imiona, tytuły, e-maile, adresy URL. Pokazuje cztery tony komunikatów: pomoc wyciszonym tekstem, ok, info i warn z ikoną oraz błąd.
- TextField
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: TextField
Shown to your team.
Enter an email address like name@example.com
Noc, podgląd: TextField
Shown to your team.
Enter an email address like name@example.com
Wysoki kontrast, podgląd: TextField
Shown to your team.
Enter an email address like name@example.com
UżycieLink do sekcji Użycie
import { TextField } from '@skribly/ui/forms'<TextField label="Email" type="email" isRequired
errorMessage="Enter an email address like name@example.com" />Każda etykieta jest propem, więc aplikacja przekazuje własne słowa we własnym języku. Zobacz zasadę brak wbudowanego tekstu.
DostępnośćLink do sekcji Dostępność
- Etykieta, opis, status i błąd są powiązane przez React Aria; niepoprawne pole ustawia aria-invalid i wymienia błąd jako pierwszy.
- Z isRequired i natywną walidacją komunikat przeglądarki pokazuje się przy wysłaniu.
- Długie słowa w komunikatach się zawijają zamiast się przepełniać.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.