Krizaka UI
Krizaka UI
Composants

Formulaires

Vous venez ici pour saisir et valider des données : un champ, un choix, une date, un formulaire entier.

Règle du responsable
Chaque champ parle le contrat d'étiquette, d'erreur et de description de Field.
Budget de taille
203.0 kB gzip pour tout le domaine ; il ne fait que baisser.

Entrées

15 entrées, dont 13 utilisées par des produits et sites en production. Les entrées expérimentales viennent en dernier : elles peuvent changer ou disparaître à toute version mineure.

  • FieldA form field: a label, a hint and an error around an Input, a Textarea or a native Select.42 fichiers l'importent
  • CheckboxBêtaA box to check: checked, unchecked or indeterminate, with its words as one clickable label.7 fichiers l'importent
  • Choice gridBêtaA line-up of choices as tiles — a visual, a name, a line: a radio group with roving focus when selectable, a named showcase otherwise; sober by default, a select screen in the arcade flavour.1 fichiers l'importent
  • ComboboxBêtaA text field that suggests and completes — one value or several as chips, from a static list or a server, with values created from what was typed.1 fichiers l'importent
  • Date pickerBêtaDates and times chosen the way the task asks — a calendar, a period with presets, a strip of days, wheels, time slots, a month, a date of birth — as ISO values (2026-10-11, 2026-10, 18:30) the form, the address and the API share, in the locale's own words.2 fichiers l'importent
  • Filter barBêtaThe bar above a list: its saved views, the controls that narrow it, the filters in force as removable chips, “Clear filters”, and the count of results — the state kept by the app, in the address.6 fichiers l'importent
  • FormBêtaA form = a schema (zod 4) + the package's fields, on TanStack Form v1: each error shows once the field is left and goes as soon as it is fixed, in the person's language (i18n keys, never the engine's English), a value can be checked on the server as it is typed, and the server's refusals land under their fields — web and React Native, the same schema.51 fichiers l'importent
  • OTP inputBêtaA one-time code in boxes over one real input: the keyboard's suggestion of the code and pasting fill every box at once.
  • Radio groupBêtaOne choice among a few options, all visible: dots with their words, whole cards, tactile keys that press in, or a segmented control.9 fichiers l'importent
  • Search fieldBêtaA search box: a clear button, a global ⌘K / Ctrl+K shortcut, a debounced onSearch, Enter to submit, and suggestions with the keyboard.9 fichiers l'importent
  • SliderBêtaA value or a range chosen by dragging a thumb along a track — steps you can see, the value floating over the thumb, the brand’s gradient, horizontal or vertical — with arrows and Page keys.5 fichiers l'importent
  • SwitchBêtaAn on/off setting that applies at once.19 fichiers l'importent
  • Tag inputBêtaFree words as removable chips — Enter or a comma adds one, a paste adds several, suggestions complete, normalize cleans and validate refuses with a reason.1 fichiers l'importent
  • Tag selectorBêtaInterests, languages, a workspace's tags: toggle chips with a limit and a count — the others rest once the limit is reached. With a marker an option is a tag with its colour; creatable adds a field where Enter takes the tag typed or creates it.4 fichiers l'importent
  • Schema formExpérimentalA form drawn from a JSON Schema: typed fields, the schema's own rules, the words of the language (x-i18n) and the rarely needed fields folded (x-advanced).

Sur cette page