Wrapper TextInput avec label, état d'erreur, toggle de visibilité du mot de passe et support des types de clavier.

Champ de saisie

Le composant Input enveloppe le TextInput de React Native avec un style cohérent, des labels, des messages d'erreur et des patterns courants comme le toggle de visibilité du mot de passe.

Utilisation de base

import { Input } from "@/components/ui/Input";

export default function LoginScreen() {
  const [email, setEmail] = useState("");

  return (
    <Input
      label="Email"
      value={email}
      onChangeText={setEmail}
      placeholder="you@example.com"
      keyboardType="email-address"
    />
  );
}

Labels et placeholders

Chaque input devrait avoir un label pour l'accessibilité :

<Input
  label="Full Name"
  value={name}
  onChangeText={setName}
  placeholder="John Doe"
/>

Le label s'affiche au-dessus du champ avec un espacement et une graisse de police appropriés.

État d'erreur

Passez une chaîne error pour afficher un retour de validation :

<Input
  label="Email"
  value={email}
  onChangeText={setEmail}
  error={emailError}
/>

Quand error est défini :

La bordure du champ devient rouge
Le message d'erreur apparaît sous le champ
Les lecteurs d'écran annoncent l'erreur

Champ mot de passe

Utilisez secureTextEntry avec le toggle de visibilité intégré :

<Input
  label="Password"
  value={password}
  onChangeText={setPassword}
  secureTextEntry
  showToggle
/>

La prop showToggle ajoute une icône oeil qui bascule la visibilité du mot de passe. Le composant gère l'état du toggle en interne.

// Implémentation dans le composant Input
const [visible, setVisible] = useState(false);

<TouchableOpacity onPress={() => setVisible(!visible)}>
  <Ionicons
    name={visible ? "eye-off" : "eye"}
    size={20}
    color="#9CA3AF"
  />
</TouchableOpacity>

Types de clavier

Définissez le clavier approprié selon le type de saisie :

<Input label="Email" keyboardType="email-address" autoCapitalize="none" />
<Input label="Phone" keyboardType="phone-pad" />
<Input label="Amount" keyboardType="numeric" />
<Input label="Website" keyboardType="url" autoCapitalize="none" />

Type de clavier	Affiche
`default`	Clavier standard
`email-address`	Clavier avec @ et .
`phone-pad`	Pavé numérique
`numeric`	Clavier numérique
`url`	Clavier avec / et .com

Multiligne

Pour les saisies de texte longues, activez le mode multiligne :

<Input
  label="Bio"
  value={bio}
  onChangeText={setBio}
  multiline
  numberOfLines={4}
  style={{ height: 100, textAlignVertical: "top" }}
/>

Indices d'auto-complétion

Aidez les gestionnaires de mots de passe et le remplissage automatique :

<Input
  label="Email"
  textContentType="emailAddress"
  autoComplete="email"
  value={email}
  onChangeText={setEmail}
/>

<Input
  label="Password"
  textContentType="password"
  autoComplete="password"
  secureTextEntry
  showToggle
  value={password}
  onChangeText={setPassword}
/>

Personnalisation

Surchargez les styles du conteneur, du champ ou du label :

<Input
  label="Custom"
  containerStyle={{ marginBottom: 24 }}
  inputStyle={{ fontSize: 18, paddingVertical: 14 }}
  labelStyle={{ color: "#6B7280" }}
  value={value}
  onChangeText={setValue}
/>

Props du composant

Prop	Type	Défaut	Description
`label`	`string`	—	Texte du label au-dessus du champ
`error`	`string`	—	Message d'erreur sous le champ
`secureTextEntry`	`boolean`	`false`	Masquer le texte (mot de passe)
`showToggle`	`boolean`	`false`	Afficher le toggle de visibilité
`containerStyle`	`ViewStyle`	—	Style du wrapper
`inputStyle`	`TextStyle`	—	Style du TextInput
`labelStyle`	`TextStyle`	—	Style du label

Champ de saisie

On this page