BjInput

Champ de saisie Vue avec libellé, aide, états de validation (default / valid / error), tailles sm et md, types HTML natifs, textarea avec rows, icône préfixe et v-model.

Utilisation

<script setup>
import { ref } from 'vue'
import { BjInput } from '@flrxnt/dsbj/vue'

const name = ref('')
</script>

<template>
  <BjInput
    v-model="name"
    label="Nom"
    hint="Tel qu’indiqué sur vos documents"
    placeholder="Dupont"
  />
</template>

États (state)

Par défaut

Information

Valide

Format accepté

Erreur

Ce champ est requis

<BjInput v-model="a" label="Neutre" state="default" message="Information" />
<BjInput v-model="b" label="OK" state="valid" message="Format accepté" />
<BjInput v-model="c" label="Problème" state="error" message="Ce champ est requis" />

Tailles

<BjInput v-model="x" label="Petit" size="sm" placeholder="sm" />
<BjInput v-model="y" label="Moyen" size="md" placeholder="md (défaut)" />

État × taille

Adresse invalide

Adresse valide

<!-- error × sm -->
<BjInput v-model="e1" label="Email" size="sm" type="email" state="error" message="Adresse invalide" />
<!-- valid × md -->
<BjInput v-model="e2" label="Email" size="md" type="email" state="valid" message="Adresse valide" />

Types d’input

Texte

E-mail

Nombre

Mot de passe

Téléphone

URL

<BjInput v-model="t1" label="Texte" type="text" />
<BjInput v-model="t2" label="E-mail" type="email" />
<BjInput v-model="t3" label="Nombre" type="number" />
<BjInput v-model="t4" label="Mot de passe" type="password" />
<BjInput v-model="t5" label="Téléphone" type="tel" />
<BjInput v-model="t6" label="URL" type="url" />

Textarea et rows

Bio

<BjInput v-model="bio" label="Bio" :textarea="true" :rows="6" placeholder="Quelques lignes…" />

Textarea désactivée

Note (lecture seule)

<BjInput
  v-model="note"
  label="Note (lecture seule)"
  :textarea="true"
  :rows="3"
  :disabled="true"
/>

Champ avec icône

Recherche

<BjInput
  v-model="q"
  label="Recherche"
  icon="ri-search-line"
  placeholder="Mots-clés…"
/>

Placeholder et rows

Message

<BjInput v-model="msg" label="Message" :textarea="true" :rows="8" placeholder="Votre message (8 lignes visibles)" />

Props

Prop	Description
`modelValue`	Valeur du champ (v-model).
`label`	Libellé accessible.
`hint`	Texte d’aide sous le libellé.
`state`	État visuel : default, valid, error.
`message`	Message sous le champ (couleur selon state).
`size`	Taille : sm ou md (défaut md).
`disabled`	Désactive le champ.
`type`	Type HTML de l’input (text, email, number, password, tel, url, etc.). Ignoré si textarea.
`placeholder`	Placeholder du champ.
`textarea`	Rend une textarea au lieu d’un input.
`rows`	Nombre de lignes de la textarea (défaut 4).
`icon`	Classe d’icône Remix affichée dans .bj-input-wrap (input uniquement).