Field
Etykieta, pomoc, status i błąd wokół kontrolki, która nie należy do tej grupy, takiej jak natywny element albo widżet z innej biblioteki. Wybierz gotowe pole, takie jak TextField, gdy któreś pasuje.
- Field
PodglądLink do sekcji Podgląd
Na żywo we wszystkich trzech motywach. Wszystko tutaj jest interaktywne.
Dzień, podgląd: Field
Optional link
Shown on your public profile.
Use 2 to 6 capital letters, such as WEB.
Noc, podgląd: Field
Optional link
Shown on your public profile.
Use 2 to 6 capital letters, such as WEB.
Wysoki kontrast, podgląd: Field
Optional link
Shown on your public profile.
Use 2 to 6 capital letters, such as WEB.
UżycieLink do sekcji Użycie
import { Field } from '@skribly/ui/forms'<Field label="Website" description="Shown on your profile." errorMessage={error}>
{(control) => <input {...control} type="url" className="…" />}
</Field>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ść
- Funkcja renderująca dostaje id, aria-describedby, aria-invalid i aria-required, więc etykieta nazywa kontrolkę, a pomoc, status i błąd są odczytywane po niej.
- Gwiazdka jest ukryta przed czytnikami ekranu, które słyszą „wymagane” z aria-required.
- Status jest elementem output, czyli regionem na żywo typu polite.
Ten przykład przechodzi przez axe we wszystkich trzech motywach przy każdym uruchomieniu testów. Zobacz, co sprawdzają testy.