# Système de design gluestack UI

## gluestack UI : aperçu de l’interface du système de design

Ajoutez un élément unique, marquez-le comme préparé et vérifiez la progression calculée.

## gluestack UI — Référence du système de design

Cette référence distingue les couleurs claires documentées en v5 du factory core installé API. Les factories directes n’appliquent pas automatiquement le thème de la CLI. L’aperçu associe explicitement les couleurs répertoriées aux styles d’origine et utilise un contour de focus personnalisé plus marqué. La géométrie et les illustrations relèvent de choix propres à l’application.

### Rôles de couleur clairs documentés en v5

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| background | #ffffff | Fond de page. |
| foreground | #0a0a0a | Texte courant lisible. |
| card | #ffffff | Surface de carte. |
| popover | #ffffff | Surface superposée ; cette étude n’utilise aucun popover. |
| popover-foreground | #0a0a0a | Texte associé à la surface superposée. |
| muted | #f5f5f5 | Surfaces d’accompagnement, dont le panneau d’illustration d’origine. |
| muted-foreground | #737373 | Descriptions secondaires et détails d’état. |
| destructive | #e7000b | Indication d’erreur de saisie ; l’erreur est également affichée sous forme de texte. |
| border | #e5e5e5 | Contours des cartes et séparateurs de liste. |
| input | #e5e5e5 | Bordure du champ au repos. |
| ring | #d4d4d4 | Couleur de l’anneau par défaut documentée ; cette étude utilise un contour de focus d’origine plus marqué, en #737373. |
| primary | #171717 | Surface d’action principale et remplissage de la barre de progression. |
| primary-foreground | #fafafa | Texte associé à la surface d’action sombre. |
| secondary | #f5f5f5 | Surface d’action secondaire. |
| secondary-foreground | #171717 | Texte associé aux surfaces secondaires. |
| accent | #f7f7f7 | Rôle supplémentaire de surface d’accentuation. |
| accent-foreground | #343434 | Texte associé au rôle d’accentuation. |
### Factory Button de core et états

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| createButton | { Root, Text, Group, Spinner, Icon } | Fournissez les composants hôtes réels ; la factory ajoute le comportement, pas un thème complet. |
| Button.Text | Text host | Maintient le texte du bouton dans le contexte de son état. |
| Button.Group | Group host | Sous-composant généré pour regrouper les boutons ; inutilisé dans cette mise en page. |
| Button.Spinner | Spinner host | Indicateur de chargement généré ; ne l’affichez pas pour une action locale instantanée. |
| Button.Icon | Icon host | Sous-composant d’icône généré ; l’aperçu utilise des actions textuelles explicites. |
| Button isDisabled | boolean | Désactive réellement l’action du bouton, et pas seulement son apparence. |
| Button data-focus-visible | true / false | Le CSS d’origine affiche un contour visible lors de la navigation au clavier. |
| Button data-active | true / false | Expose un état d’interaction enfoncé pour la mise en forme. |
### Contexte Input de core et propriétés des composants hôtes

| Nom / règle | Valeur / configuration | Utilisation |
| --- | --- | --- |
| createInput | { Root, Icon, Slot, Input } | Crée le contexte du champ et les emplacements qui lui sont associés. |
| Input.Input | TextInput host | Le composant de saisie de texte renvoyé par la factory. |
| isInvalid | Input root boolean | Propage le contexte invalide et aria-invalid au champ. |
| isRequired | Input root boolean | Propage l’état requis ; l’application effectue toujours sa propre validation après suppression des espaces superflus. |
| value / onChangeText | Controlled TextInput props | Conservez le texte provisoire dans l’état React. |
| onSubmitEditing | TextInput callback | Ajoute un élément lorsque la touche Entrée est pressée dans cet exemple de navigateur. |
| maxLength | 60 in the original study | Limite de TextInput choisie pour cette application ; ce n’est pas une valeur par défaut de gluestack. |
| aria-label | Item name in the original study | Donne un nom au champ en complément d’un libellé visible. |
## gluestack UI — Guide complet du système de design

Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle.

Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources.

## gluestack UI — Versions, factories et composants générés du système de design

### Choisissez la méthode d’implémentation appropriée

> gluestack comporte plusieurs couches. Le processus d’installation standard génère des composants stylisés dans une application. Cette étude importe plutôt createButton et createInput depuis le package core installé et leur fournit des composants hôtes React Native Web. Cette distinction est importante : l’installation de core seul ne fournit ni les variantes de boutons générées ni le thème complet.

L’exemple en cours d’exécution utilise core 5.0.15 et utils 5.0.6. Ses adaptateurs React Native Web sont de vrais composants, tandis que la structure et l’état sont propres à l’exemple. Consultez la documentation d’installation pour créer une application Expo ou Next.js complète ; utilisez les fichiers complets présentés ici pour reproduire cette étude spécifique dans un navigateur.

## gluestack UI — Couleurs sémantiques et styles explicites du système de design

### Associez les rôles avant de choisir les éléments décoratifs

La page utilise un fond blanc, une action principale sombre, des zones d’accompagnement atténuées et des rôles de bordure bien visibles. Ces valeurs sont reprises de la palette claire documentée en v5, puis attribuées explicitement au moyen des styles Native de React et de CSS classiques. Aucun fournisseur d’exécution ne les applique de manière implicite.

Un champ invalide associe un contour de couleur d’erreur à une explication lisible et rend le focus au champ. Le contour de focus d’origine est plus sombre que l’anneau par défaut documenté ; la feuille de style précise donc qu’il s’agit d’un choix propre à l’exemple, et non d’un jeton de la bibliothèque.

### Procédez aux migrations avec méthode

Ne mélangez pas sans discernement les anciens exemples utilisant des noms de palette numériques avec le vocabulaire sémantique de la v5. Examinez la configuration générée installée et le guide de mise à niveau avant de remplacer le nom d’un jeton. Une étude avec des factories directes peut illustrer le comportement sans pour autant prouver que la migration complète d’une application est terminée.

## gluestack UI — Composition des boutons et actions au clavier du système de design

### Fournissez tous les composants hôtes à la factory

createButton reçoit Pressable, Text, View, ActivityIndicator et un composant hôte pour les icônes. Il renvoie Button ainsi que les sous-composants Text, Group, Spinner et Icon. L’exemple complet utilise Button.Text au lieu de placer une chaîne brute dans la racine pressable.

L’emballage est une transition d’état synchrone : aucun indicateur de chargement ni délai de sauvegarde n’est donc simulé. Chaque action inclut le nom de l’élément dans son libellé accessible. Le libellé visible alterne entre « Emballer l’élément » et « Déballer » afin que l’action suivante reste claire.

### Vérifiez le comportement rendu

1. Appuyez sur Tab jusqu’à une action « Emballer l’élément », puis sur Espace.

2. Vérifiez que l’état textuel d’emballage et la valeur de progression changent.

3. Utilisez « Déballer » et vérifiez que le même élément reste dans la liste.

4. Examinez le contour de focus : un survol à la souris ne suffit pas à prouver la prise en charge du clavier.

## gluestack UI — Contexte Input et validation complète du système de design

### Validez la valeur qui sera enregistrée

Le champ reste contrôlé au moyen de value et onChangeText. Lors de l’ajout, le brouillon est d’abord débarrassé de ses espaces superflus ; si le résultat est vide, l’ajout est refusé, puis les noms sont comparés sans tenir compte de la casse. Une valeur refusée reste dans le champ afin que l’utilisateur puisse la corriger.

La racine reçoit isInvalid et isRequired ; le champ réel reçoit le libellé, la référence vers la description et une ref permettant de rétablir le focus. La validation relève de l’application : rendre un champ core obligatoire ne crée pas la règle qui interdit les doublons.

### Gérez tous les états visibles du champ

- Initial : le champ est vide et l’indication de longueur est visible.

- Invalide : l’explication apparaît dans une alerte et le focus est placé sur le champ.

- Modification : le texte d’erreur obsolète disparaît lorsque l’utilisateur modifie le brouillon.

- Accepté : une nouvelle ligne non emballée apparaît, le champ est vidé et le statut confirme l’ajout.

## gluestack UI — Identité stable et progression dérivée du système de design

### Enregistrez les éléments, calculez le récapitulatif

Chaque élément possède un identifiant numérique stable, un nom et un indicateur d’emballage. Une ref fournit les nouveaux identifiants ; le nom affiché ne sert pas de clé React. Le basculement s’effectue par identifiant : deux mises à jour indépendantes de l’interface ne peuvent donc pas modifier par inadvertance une autre ligne.

Le numérateur de la progression est calculé à partir des indicateurs d’emballage et le dénominateur à partir de la liste actuelle. L’ajout d’un article non emballé peut faire baisser le pourcentage sans retirer les articles déjà emballés. C’est la conséquence normale d’une liste plus longue, et non une erreur d’animation.

### Faire de la réinitialisation une action locale explicite

La réinitialisation restaure les trois articles d’exemple, efface le brouillon et l’erreur, réinitialise l’identifiant suivant et annonce le résultat. Un rechargement rétablit également l’état d’exemple. Cette prévisualisation ne repose sur aucun serveur, aucune synchronisation de compte ni aucun stockage persistant.

## Système de design gluestack UI : mise en page responsive et illustrations originales

### Distinguer le comportement de l’hôte de la géométrie de la page

Sur ordinateur, la liste de contrôle est placée à côté de son panneau de saisie. À 700 pixels, la mise en page passe sur une seule colonne. Les lignes passent à la ligne si nécessaire et les noms d’articles longs se coupent dans l’espace disponible ; une action à largeur fixe ne doit pas décaler toute la page horizontalement.

Le carnet et le crayon sont des formes originales de CSS, et non des ressources de marque gluestack copiées. Le rayon de 14 pixels des cartes, l’espacement de 24 pixels entre les panneaux et l’échelle des titres sont des choix propres à cette étude. Le tableau de référence les distingue des rôles de couleur documentés.

## Système de design gluestack UI : accessibilité du navigateur et périmètre des plateformes

### Tester l’environnement réellement représenté

La prévisualisation utilise React Native Web et a été vérifiée dans un navigateur. Elle ne permet pas d’établir le comportement natif sur iOS ou Android. Une application Expo doit vérifier séparément les zones tactiles, les annonces du lecteur d’écran, l’évitement du clavier et la navigation propre à chaque plateforme.

L’élément de progression comprend son nom, ses valeurs minimale et maximale, ainsi que sa valeur actuelle. Un statut dynamique décrit les actions accomplies sans déplacer le lecteur de la liste de contrôle. En cas de rejet, le formulaire conserve le brouillon et redonne le focus au champ. Il s’agit de responsabilités de l’application qui s’ajoutent au comportement natif de base.

## Système de design gluestack UI : compilation complète et périmètre des dépendances

### Reproduire cette étude à l’identique

Enregistrez les quatre fichiers de la section Component Examples dans un même dossier et installez les packages épinglés indiqués ci-dessous. La configuration de compilation associe react-native à react-native-web, car les imports internes utilisent le nom du module natif. Le code source importe directement les hôtes du navigateur et ne charge jamais l’environnement d’exécution Expo.

L’installation de ce sous-ensemble restreint de packages utilise la résolution historique des dépendances peer, pour le Web uniquement. Ce n’est pas une recommandation pour une application native complète : la bibliothèque entière déclare des dépendances peer pour les intégrations natives, SVG et safe-area que ce bundle à deux créateurs n’utilise pas. Ajoutez les dépendances peer appropriées si vous élargissez l’ensemble de composants.

### Modifier une seule couche à la fois

1. Compilez les fichiers sans modification, puis vérifiez l’ajout, le rejet des doublons, l’emballage et la réinitialisation.

2. Modifiez la mise en page originale ou le contenu de l’application sans toucher au câblage des créateurs.

3. Si vous adoptez les composants NativeWind générés, remplacez le style et la configuration du fournisseur dans une étape d’intégration distincte.

4. Après cette modification, vérifiez à nouveau le comportement du clavier et les plateformes réellement ciblées.

## gluestack UI Exemples de composants du système de design

### app.jsx — étude complète du composant de base

Le câblage réel des créateurs et l’intégralité du modèle d’état de la liste de contrôle.

```
import React,{useState,useRef} from 'react';
import{createRoot}from'react-dom/client';
import{Pressable,Text,View,TextInput,ActivityIndicator}from'react-native-web';
import{createButton}from'@gluestack-ui/core/button/creator';
import{createInput}from'@gluestack-ui/core/input/creator';
const Button=createButton({Root:Pressable,Text,Group:View,Spinner:ActivityIndicator,Icon:View});
const Input=createInput({Root:View,Input:TextInput,Slot:Pressable,Icon:View});
const seed=[{id:1,name:'Sketchbook',packed:true},{id:2,name:'Pencil roll',packed:false},{id:3,name:'Water bottle',packed:false}];
function App(){const[items,setItems]=useState(seed),[name,setName]=useState(''),[error,setError]=useState(''),[message,setMessage]=useState('Pack each item when it is ready.');const next=useRef(4),field=useRef(null);const count=items.filter(x=>x.packed).length;
function add(){const v=name.trim();if(!v||items.some(x=>x.name.toLowerCase()===v.toLowerCase())){setError(!v?'Enter the name of an item.':'That item is already in the kit.');field.current.focus();return}setItems([...items,{id:next.current++,name:v,packed:false}]);setName('');setError('');setMessage(v+' added to this local kit.')}
return <main><header><p className="eyebrow">GLUESTACK UI / CORE COMPONENT STUDY</p><h1>A small kit.<br/>A clearer start.</h1><p className="intro">Prepare a drawing kit with actual gluestack core Button and Input creators. Your checklist stays in this browser session.</p></header><div className="layout"><section className="panel"><div className="sectionhead"><h2>Your field kit</h2><span className="badge">{count} of {items.length} packed</span></div><div className="meter" role="progressbar" aria-label="Packed items" aria-valuemin={0} aria-valuemax={items.length} aria-valuenow={count}><i style={{width:100*count/items.length+'%'}}/></div><ul>{items.map(item=><li key={item.id}><div><strong>{item.name}</strong><span>{item.packed?'Packed and ready':'Still to pack'}</span></div><Button onPress={()=>{setItems(items.map(x=>x.id===item.id?{...x,packed:!x.packed}:x));setMessage(item.name+(item.packed?' marked to pack.':' marked packed.'))}} style={item.packed?styles.secondary:styles.primary} aria-label={(item.packed?'Unpack ':'Pack ')+item.name}><Button.Text style={{color:item.packed?'#171717':'#fafafa',fontSize:14,fontWeight:600}}>{item.packed?'Unpack':'Pack item'}</Button.Text></Button></li>)}</ul><p className="status" role="status">{message}</p></section><aside className="panel"><div className="drawing" aria-hidden="true"><span className="book">FIELD<br/>NOTES</span><i className="pencil"/></div><h2>Add one useful thing</h2><label htmlFor="kit-name">Item name</label><Input isInvalid={!!error} isRequired style={styles.input}><Input.Input id="kit-name" aria-label="Item name" aria-describedby={error?'kit-error':'kit-hint'} ref={field} value={name} onChangeText={v=>{setName(v);setError('')}} onSubmitEditing={add} maxLength={60} style={styles.field}/></Input><p id="kit-hint" className="hint">Use a short, unique name. Maximum 60 characters.</p>{error&&<p id="kit-error" className="error" role="alert">{error}</p>}<Button onPress={add} style={styles.primary}><Button.Text style={styles.primaryText}>Add to kit</Button.Text></Button><Button onPress={()=>{setItems(seed);setName('');setError('');setMessage('Example kit restored.');next.current=4}} style={styles.reset}><Button.Text style={{color:'#737373',fontSize:14}}>Reset example kit</Button.Text></Button></aside></div><p className="scope">Native @gluestack-ui/core 5.0.15 behavior rendered through React Native Web. Original OpenDesign layout and artwork; explicitly styled with documented v5 light color roles. This is a web-only study, not an Expo build or the CLI-generated NativeWind component set.</p></main>}
const styles={primary:{backgroundColor:'#171717',paddingVertical:12,paddingHorizontal:16,borderRadius:8,alignItems:'center',justifyContent:'center'},secondary:{backgroundColor:'#f5f5f5',paddingVertical:12,paddingHorizontal:16,borderRadius:8,alignItems:'center',justifyContent:'center'},primaryText:{color:'#fafafa',fontSize:14,fontWeight:600},input:{borderWidth:1,borderColor:'#e5e5e5',borderRadius:8,marginTop:8},field:{padding:12,fontSize:16,color:'#0a0a0a',outlineStyle:'none'},reset:{paddingVertical:16,alignItems:'center'}};
createRoot(document.getElementById('app')).render(<App/>);
```

Référence du code

### style.css — mise en page originale et rôles clairs explicites

Structure responsive complète, illustrations, contours d’état et style de focus du navigateur.

```
*{box-sizing:border-box}body{margin:0;background:#fff;color:#0a0a0a;font-family:Arial,sans-serif}main{max-width:1100px;margin:auto;padding:40px}.eyebrow{font-size:12px;letter-spacing:.12em;font-weight:700}.intro{max-width:62ch;color:#737373;line-height:1.6}h1{font-size:52px;line-height:1.03;letter-spacing:-.045em;margin:24px 0}h2{font-size:22px;margin:0 0 20px}.layout{display:grid;grid-template-columns:1.35fr 1fr;gap:24px;margin-top:32px}.panel{border:1px solid #e5e5e5;border-radius:14px;padding:24px;min-width:0}.sectionhead{display:flex;gap:12px;justify-content:space-between;align-items:baseline;flex-wrap:wrap}.badge{font-size:12px;background:#f5f5f5;padding:6px 10px;border-radius:20px}.meter{height:6px;border-radius:8px;background:#f5f5f5;margin:6px 0 24px;overflow:hidden}.meter i{display:block;height:100%;background:#171717}ul{list-style:none;padding:0;margin:0}li{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:20px 0;border-bottom:1px solid #e5e5e5}li>div:first-child{min-width:0;flex:1}li strong{display:block;font-size:16px;overflow-wrap:anywhere}li span{display:block;font-size:13px;color:#737373;margin-top:8px}.status{font-size:14px;line-height:1.6;margin-top:24px}.hint,.scope{font-size:12px;line-height:1.6;color:#737373}.scope{margin-top:28px}.error{font-size:14px;color:#e7000b;line-height:1.5}label{font-size:14px}.drawing{height:130px;background:#f5f5f5;border-radius:8px;display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:24px}.book{display:block;background:#171717;color:#fafafa;border-left:5px solid #737373;width:80px;height:96px;padding:22px 12px;font-size:12px;line-height:1.6;transform:rotate(-8deg)}.pencil{height:90px;width:8px;background:#a3a3a3;transform:rotate(14deg)}[data-focus-visible=true]{outline:3px solid #737373;outline-offset:3px}[data-invalid=true]{border-color:#e7000b!important}input:focus-visible{outline:2px solid #737373!important;outline-offset:3px}@media(max-width:700px){main{padding:20px}h1{font-size:40px}.layout{grid-template-columns:1fr}.panel{padding:20px}li{gap:12px;flex-wrap:wrap}li>div:first-child{flex-basis:120px}}
```

Référence du code

### build.mjs — configuration complète du bundler Web

L’alias de l’import natif est nécessaire, même si app.jsx importe directement ses hôtes depuis React Native Web.

```
import { build } from 'esbuild';
await build({entryPoints:['app.jsx'],bundle:true,minify:true,outfile:'app.js',alias:{'react-native':'react-native-web'},resolveExtensions:['.web.js','.js','.jsx','.ts','.tsx','.json'],loader:{'.js':'jsx'},define:{'process.env.NODE_ENV':'"production"'}});
```

Référence du code

### index.html — page d’entrée complète du navigateur

Conservez ce fichier dans le même dossier que style.css et le fichier app.js généré.

```
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>gluestack field kit</title><link rel="stylesheet" href="style.css"></head><body><div id="app"></div><script src="app.js"></script></body></html>
```

Référence du code

## gluestack UI Configuration de l’agent pour le système de design

### Point de départ de l’implémentation

Enregistrez d’abord les quatre fichiers complets. Cette configuration se limite au sous-ensemble du navigateur présenté ici et n’initialise ni NativeWind, ni Uniwind, ni Expo, ni un registre de composants généré.

```
npm init -y
npm install react@19.3.0 react-dom@19.3.0 react-native-web@0.21.3 @gluestack-ui/core@5.0.15 @gluestack-ui/utils@5.0.6 esbuild@0.28.2 --legacy-peer-deps
node build.mjs
python3 -m http.server 8000
# Open http://localhost:8000/
```

### Un prompt pour votre projet

```
Implémentez l’étude complète pour le navigateur du kit de champs gluestack core 5.0.15 à l’aide de createButton/createInput et des hôtes React Native Web. Préservez les identifiants stables, le texte contrôlé du brouillon, la suppression des espaces et la validation des doublons, la restauration du focus, le décompte calculé des articles emballés, la réinitialisation locale et le mappage explicite des rôles clairs de la v5. Distinguez les choix de mise en page originaux des valeurs par défaut de la bibliothèque. Ne prétendez pas avoir effectué des tests sur mobile natif ni disposer d’une persistance côté serveur.
```

## gluestack UI Sources et périmètre du système de design

Comportement réel de @gluestack-ui/core 5.0.15 via React Native Web 0.21.3. La mise en page, les illustrations et le modèle d’état du kit de champs sont des créations originales de OpenDesign. Cet exemple pour navigateur utilise directement les créateurs et des styles explicites ; il ne s’agit pas de l’ensemble de composants NativeWind/Uniwind généré par l’interface en ligne de commande, et il n’a pas été testé sur iOS ou Android.

- Installation La procédure standard d’installation des composants générés.

- Jetons sémantiques de la v5 Rôles de couleur clairs actuels et personnalisation.

- Bouton API Anatomie du bouton, interactions et attributs d’état.

- Fabrique Button de base Implémentation exacte du créateur installé en version 5.0.15.

- Implémentation de Input dans core Champ contrôlé, état invalide et câblage de l’accessibilité.

- Passer à la v5 Migration de version et changements de nom.

## gluestack UI Ressources associées au système de design

### Headless UI

Headless UI fournit des composants d’interaction React sans style prédéfini pour les boîtes de dialogue, les listes de sélection et les interrupteurs. Ce guide porte sur la composition de leur comportement natif en matière de focus, de sélection et de fenêtres contextuelles avec du CSS ordinaire, à partir d’un flux de partage de documents comme exemple fonctionnel.

### HeroUI

Une référence HeroUI v3 avec de véritables variables sémantiques CSS, des commandes composées React, des surfaces claires et sombres, et une méthode d’export d’images opérationnelle.

### Ionic Framework

Une interface native Ionic de préférences de lecture, avec des rôles de couleur vérifiés, la géométrie des curseurs iOS et Material, le comportement réel des segments et des interrupteurs, ainsi qu’un article qui s’adapte aux choix de police, de taille et de papier.


- [Référence de mise en œuvre](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/button/creator/index.jsx)
- [Source](https://gluestack.io/ui/docs/home/theme-configuration/default-tokens)
- [Source](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/button/creator/index.jsx)
- [Source](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/input/creator/Input.jsx)
- [Référence du code](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/button/creator/index.jsx)
- [Référence du code](https://gluestack.io/ui/docs/home/theme-configuration/default-tokens)
- [Référence du code](https://github.com/gluestack/gluestack-ui)
- [Installation La procédure standard d’installation des composants générés.](https://gluestack.io/ui/docs/home/getting-started/installation)
- [Jetons sémantiques de la v5 Rôles de couleur clairs actuels et personnalisation.](https://gluestack.io/ui/docs/home/theme-configuration/default-tokens)
- [Bouton API Anatomie du bouton, interactions et attributs d’état.](https://gluestack.io/ui/docs/components/button)
- [Fabrique Button de base Implémentation exacte du créateur installé en version 5.0.15.](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/button/creator/index.jsx)
- [Implémentation de Input dans core Champ contrôlé, état invalide et câblage de l’accessibilité.](https://cdn.jsdelivr.net/npm/@gluestack-ui/core@5.0.15/lib/esm/input/creator/Input.jsx)
- [Passer à la v5 Migration de version et changements de nom.](https://gluestack.io/ui/docs/guides/more/upgrade-to-v5)