Field

Web et mobile — le même composant pour React et React Native. Stable : son API ne change qu’à une version majeure.

Pourquoi il est là. Used by Orochia, Orazaka.

Installation

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

import { Field, Input, Textarea, Select } from "@krizaka/ui/field";

Exemples

Props

Accessibilité

• Plain HTML wiring: Field.Label htmlFor = the control's id; hint and error ids in aria-describedby.
• invalid sets aria-invalid and data-invalid on the control.
• A disabled control is skipped by Tab: if the value matters, prefer readOnly.

Bonnes pratiques

• Always a visible Field.Label: a placeholder is an example, never the label.
• Put the hint before the error is possible (“We never share it”), the error after it is: what is wrong and how to fix it.
• Use the right type (email, url, number) and autoComplete: phones show the right keyboard.

Composants liés

• CheckboxA box to check: checked, unchecked or indeterminate, with its words as one clickable label.
• SwitchAn on/off setting that applies at once.
• Radio groupOne choice among a few options, all visible: dots with their words, whole cards, tactile keys that press in, or a segmented control.
• SliderA 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.

Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub