Composants de formulaire
Tous les contrôles dont un formulaire a besoin, d’un simple champ texte à une sélection multiple avec recherche, un sélecteur de plage de dates et un champ de code à usage unique. Ils partagent un même système de champ pour les libellés, descriptions et erreurs, donc la validation se lit partout de la même façon.
Les champs restent à 16 pixels sur écran tactile pour qu’iOS ne zoome jamais, les champs invalides peuvent secouer pour attirer l’œil, et chaque contrôle fonctionne au clavier seul.
- Calendar
- Checkbox
- Combobox
- Date picker
- Field
- Input
- Input group
- Input OTP
- Label
- Native select
- Questionnaire
- Radio group
- Select
- Slider
- Switch
- Textarea
- CalendarUne grille de dates pour la sélection simple, de plage et multiple, avec des mois qui défilent, des aperçus de plage et des jours à taille tactile.
- CheckboxUne case à cocher dont la coche se dessine, avec des parents indéterminés, des groupes et des libellés qui partagent son survol.
- ComboboxUn select filtrable avec chips, groupes et résultats asynchrones, dans un popup qui se redimensionne pendant la saisie.
- Date pickerUn bouton qui ouvre un calendrier dans un popover, ou une bottom sheet sur mobile, pour des dates simples et des plages.
- FieldDes libellés, descriptions et erreurs reliés à leur contrôle, avec états de validation et mises en page pour les formulaires.
- InputUn champ de saisie texte en trois tailles, avec états invalide et lecture seule, style de validation natif et police tactile de 16px pour que les téléphones ne zooment jamais.
- Input groupUn champ de saisie avec icônes, texte, boutons ou indice clavier attachés, partageant une même bordure et un même anneau de focus.
- Input OTPDes emplacements pour code à usage unique qui acceptent la saisie, le collage et le remplissage automatique par SMS, avec une animation facultative qui fait cascader les codes et un statut de vérification.
- LabelUn label qui suit son contrôle, s'atténue quand il est désactivé et le marque tout seul comme obligatoire ou facultatif.
- Native selectLe select natif du navigateur, stylé pour s’accorder à Input, avec un placeholder discret, la prise en charge de Field et le sélecteur du système sur chaque appareil.
- QuestionnaireUn formulaire pas à pas qui passe d'une question à l'autre avec un sens de direction, montre une vraie progression et répond au clavier.
- Radio groupChoisit une option dans un ensemble, avec un point qui passe d'un choix à l'autre et des cartes dont l'anneau de sélection glisse vers le nouveau choix.
- SelectChoisissez une ou plusieurs options dans une liste qui s'ouvre sur la valeur courante, avec saisie prédictive, groupes et prise en charge des formulaires.
- SliderChoisissez une valeur ou une plage en glissant, en touchant la piste ou avec les touches, avec des sauts fluides et une bulle de valeur facultative.
- SwitchUn interrupteur on/off qu'on peut toucher, presser ou faire glisser, avec un curseur qui s'étire sous le doigt et un état d'attente facultatif pour les enregistrements.
- TextareaUn texte multiligne qui grandit en douceur selon ce que vous écrivez, entre un nombre minimal et maximal de lignes, avec compteurs, validation et raccourci d’envoi.
Utilisés dans les blocs Pro
Des blocs pour produits d’IA construits avec ces composants.
- MarkdownLe rendu Markdown pour les réponses IA. Gère le streaming sans syntaxe à moitié tapée, les tableaux à copier et les citations en ligne.
- API keysLa page des clés API d’un produit IA. Gère un secret affiché une seule fois, la révocation avec annulation et la rotation avec délai de grâce.
- NotificationsLa section Notifications des réglages d’un produit IA. Gère une grille canal par événement, les heures calmes et la permission du navigateur pour le push.
- SecurityLa section Sécurité des réglages d’un produit IA. Gère les sessions, la double authentification avec codes de récupération et la suppression derrière une confirmation saisie.
- BillingLa page de forfait et d’utilisation d’un produit IA. Gère les crédits épuisés en cours de cycle, les changements de forfait au prorata et les erreurs de carte.
- ModelsLa page Modèles des réglages d’un produit IA. Gère le modèle et l’effort par défaut, les fournisseurs et les serveurs personnalisés avec test de connexion.