Formularze
Pola z jednym wyglądem i jednym systemem komunikatów: etykieta ze znakiem wymagane lub opcjonalne, tekst pomocy, status w tonie ok, info lub warn oraz błąd z ikoną. Każdy komunikat jest powiązany ze swoją kontrolką, błędy ustawiają aria-invalid, a po nieudanym wysłaniu podsumowanie linkuje do pól. Budowane z celem WCAG 2.2 AA, od 320 px.
Strony: 21, eksporty: 23
- Field
- FormErrorSummary
- Input
- TextField
- Textarea
- Select
- MultiSelect
- Checkbox
- CheckboxGroup
- Radio
- RadioGroup
- Switch
- Range
- FileInput
- ColorInput
- DateInput
- DateTimeInput
- SearchField
- InputWithIcon
- ChipInput
- SettingRow
- ToggleRow
- FormActions
ImportLink do sekcji Import
Każda grupa ma własny punkt wejścia, więc aplikacja, która potrzebuje tylko tej grupy, ładuje tylko ją. Wszystko jest też eksportowane z @skribly/ui.
import { Field, FormErrorSummary, Input, TextField, … } from '@skribly/ui/forms'Strony tej grupyLink do sekcji Strony tej grupy
- FieldEtykieta, 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
- FormErrorSummaryLista problemów po nieudanym wysłaniu, umieszczona na górze formularza. Używaj jej razem z błędami przy każdym polu, nigdy zamiast nich.FormErrorSummary
- InputSamo pole tekstowe, do budowania pola z części React Aria albo dla Field wokół niego. Większość formularzy potrzebuje TextField, który zawiera etykietę.Input
- TextFieldJednoliniowe 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
- TextareaTekst wieloliniowy, taki jak opis albo notatka. Włącz monospace dla Markdowna albo kodu i dodaj licznik, gdy jest limit.Textarea
- SelectJeden wybór z listy do około piętnastu opcji. Dla większej liczby albo gdy ludzie wiedzą, co wpisać, lepsze jest pole kombinowane z wyszukiwaniem.Select
- MultiSelectKilka wyborów ze znanej listy, takich jak etykiety albo kanały. Dla swobodnego tekstu, który zamienia się w tagi, użyj ChipInput.MultiSelect
- CheckboxCheckbox to jedna odpowiedź tak lub nie zapisana razem z formularzem, na przykład akceptacja regulaminu. CheckboxGroup to kilka niezależnych wyborów pod jedną etykietą.Checkbox, CheckboxGroup
- RadioGroupJeden wybór z dwóch do sześciu opcji, które mają być widoczne naraz. Dla większej liczby użyj Select.Radio, RadioGroup
- SwitchUstawienie włączone i wyłączone, które działa od razu, bez przycisku zapisu. Dla wyboru zapisywanego z formularzem użyj Checkbox.Switch
- RangeWartość na skali, gdzie dokładna liczba ma mniejsze znaczenie niż wyczucie, na przykład rozmiar tekstu albo poziom powiększenia. Przekaż tablicę, aby mieć dwa uchwyty.Range
- FileInputDołącz pliki, wybierając je, upuszczając albo wklejając. Sprawdza typ i rozmiar i wypisuje wybrane pliki, każdy z przyciskiem usuwania.FileInput
- ColorInputKolor jako wartość szesnastkowa, wpisana albo wybrana. Gotowe kolory utrzymują wybór w obrębie palety, na przykład kolorów etykiet albo marki.ColorInput
- DateInputDzień wpisywany segment po segmencie albo wybierany w kalendarzu, na przykład termin. Kolejność dnia, miesiąca i roku zależy od ustawień regionalnych.DateInput
- DateTimeInputDzień i godzina w jednym polu, na przykład przypomnienie albo wydanie. Przekaż ZonedDateTime, aby pokazać strefę czasową.DateTimeInput
- SearchFieldTekst, który filtruje albo wyszukuje, z przyciskiem czyszczenia i opcjonalną podpowiedzią klawisza. Bez widocznej etykiety nadaj mu aria-label.SearchField
- InputWithIconPole tekstowe z ikoną na początku i opcjonalnym tekstem na końcu, takim jak jednostka albo domena. Ikona jest wskazówką, nigdy etykietą.InputWithIcon
- ChipInputSwobodny tekst, który zamienia się w chipy z możliwością usunięcia, takie jak tematy albo adresy e-mail. Dla stałej listy opcji użyj MultiSelect.ChipInput
- SettingRowJedna linia listy ustawień: tytuł i objaśnienie po lewej, dowolna kontrolka po prawej. Na wąskim ekranie kontrolka przechodzi pod spód.SettingRow
- ToggleRowLinia ustawień, która jest jednym przełącznikiem, na przykład preferencja czytelnika. Działa od razu.ToggleRow
- FormActionsRząd przycisków na końcu formularza, z wynikiem ostatniego wysłania. Główny przycisk umieść jako ostatni.FormActions