BjInput

import { useState } from 'react'
import { BjInput } from '@flrxnt/dsbj/react'

export default function Example() {
  const [name, setName] = useState('')
  return (
    <BjInput
      value={name}
      onChange={(e) => setName(e.target.value)}
      label="Nom"
      hint="Tel qu’indiqué sur vos documents"
      placeholder="Dupont"
    />
  )
}

import { useState } from 'react'
import { BjInput } from '@flrxnt/dsbj/react'

export default function Example() {
  const [a, setA] = useState('')
  const [b, setB] = useState('ok@example.com')
  const [c, setC] = useState('')
  return (
    <>
      <BjInput value={a} onChange={(e) => setA(e.target.value)} label="Défaut" state="default" message="Message informatif" />
      <BjInput value={b} onChange={(e) => setB(e.target.value)} label="Valide" state="valid" message="Format accepté" />
      <BjInput value={c} onChange={(e) => setC(e.target.value)} label="Erreur" state="error" message="Champ obligatoire" />
    </>
  )
}

import { BjInput } from '@flrxnt/dsbj/react'

export default function Example() {
  return (
    <>
      <BjInput size="sm" label="Petit" placeholder="sm" />
      <BjInput size="md" label="Moyen (défaut)" placeholder="md" />
    </>
  )
}

import { useState } from 'react'
import { BjInput } from '@flrxnt/dsbj/react'

export default function Example() {
  const [v, setV] = useState({ email: '', num: '', pass: '', tel: '', url: '' })
  return (
    <>
      <BjInput type="email" label="E-mail" value={v.email} onChange={(e) => setV((s) => ({ ...s, email: e.target.value }))} />
      <BjInput type="number" label="Nombre" value={v.num} onChange={(e) => setV((s) => ({ ...s, num: e.target.value }))} />
      <BjInput type="password" label="Mot de passe" value={v.pass} onChange={(e) => setV((s) => ({ ...s, pass: e.target.value }))} />
      <BjInput type="tel" label="Téléphone" value={v.tel} onChange={(e) => setV((s) => ({ ...s, tel: e.target.value }))} />
      <BjInput type="url" label="URL" value={v.url} onChange={(e) => setV((s) => ({ ...s, url: e.target.value }))} />
    </>
  )
}

import { useState } from 'react'
import { BjInput } from '@flrxnt/dsbj/react'

export default function Example() {
  const [text, setText] = useState('')
  return (
    <BjInput
      textarea
      rows={6}
      value={text}
      onChange={(e) => setText(e.target.value)}
      label="Commentaire"
      placeholder="Votre message…"
    />
  )
}

import { useState } from 'react'
import { BjInput } from '@flrxnt/dsbj/react'

export default function Example() {
  const [q, setQ] = useState('')
  return (
    <BjInput
      icon="ri-mail-line"
      type="email"
      value={q}
      onChange={(e) => setQ(e.target.value)}
      label="Courriel"
      placeholder="vous@exemple.com"
    />
  )
}

import { BjInput } from '@flrxnt/dsbj/react'

export default function Example() {
  return <BjInput label="Lecture seule" value="Non modifiable" disabled />
}

import { useState } from 'react'
import { BjInput } from '@flrxnt/dsbj/react'

export default function Example() {
  const [v, setV] = useState('')
  return (
    <BjInput
      size="sm"
      icon="ri-user-line"
      state="error"
      message="Identifiant requis"
      label="Identifiant"
      value={v}
      onChange={(e) => setV(e.target.value)}
      placeholder="min. 3 caractères"
    />
  )
}

import { useState, type ChangeEvent } from 'react'
import { BjInput } from '@flrxnt/dsbj/react'

export default function Example() {
  const [value, setValue] = useState('')
  function handleChange(e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
    setValue(e.target.value)
  }
  return (
    <BjInput id="login-field" value={value} onChange={handleChange} label="Login" hint="Sensible à la casse" />
  )
}