Gérez les valeurs de formulaire avec l’état React.
Gérez les valeurs dans React et lisez-les lors de l’enregistrement. TextField accepte aussi name et participe à FormData. Toggle, Picker et Slider ne produisent pas de valeurs de formulaire natives : lisez leurs valeurs depuis l’état.
Ce modèle fonctionne avec du texte, des booléens, des choix et des nombres. Utilisez le même état initial sur le serveur et le client :
import { useState } from "react"
import { Button, Picker, Slider, TextField, Toggle } from "@liquidify/react"
import "@liquidify/react/styles.css"
export function AccountForm() {
const [name, setName] = useState("")
const [notify, setNotify] = useState(true)
const [plan, setPlan] = useState("free")
const [volume, setVolume] = useState(0.5)
const save = () => console.log({ name, notify, plan, volume })
return (
<form onSubmit={(event) => event.preventDefault()}>
<label htmlFor="account-name">Display name</label>
<TextField
id="account-name"
name="name"
value={name}
onChange={setName}
placeholder="Ada Lovelace"
/>
<Toggle
aria-label="Email notifications"
checked={notify}
onChange={setNotify}
/>
<Picker
aria-label="Plan"
items={[
{ value: "free", label: "Free" },
{ value: "pro", label: "Pro" },
]}
value={plan}
onChange={setPlan}
/>
<Slider
aria-label="Alert volume"
value={volume}
onChange={setVolume}
min={0}
max={1}
step={0.1}
/>
<Button variant="borderedProminent" onPress={save}>
Enregistrer
</Button>
</form>
)
}Chaque onChange fournit directement une valeur typée : string pour TextField et Picker, boolean pour Toggle, et number pour Slider. Il n’est pas nécessaire de l’extraire d’un événement.
Button utilise <button type="button"> : lancez donc l’enregistrement depuis onPress.
TextField transmet name à l’input natif. Vous pouvez le lire avec FormData sans état contrôlé :
import { useRef } from "react"
import { Button, TextField } from "@liquidify/react"
export function ContactForm() {
const formRef = useRef<HTMLFormElement>(null)
const send = () => {
if (!formRef.current) return
const data = new FormData(formRef.current)
console.log(data.get("email"))
}
return (
<form ref={formRef} onSubmit={(event) => event.preventDefault()}>
<label htmlFor="contact-email">Email</label>
<TextField
id="contact-email"
name="email"
inputMode="email"
autoComplete="email"
/>
<Button variant="borderedProminent" onPress={send}>
Send
</Button>
</form>
)
}Combinez ces valeurs avec l’état de Toggle, Picker et Slider, qui ne participent pas à FormData.
Form et Form.Section regroupent visuellement les contrôles. Ils ne gèrent ni valeurs ni état ; l’élément <form> reste responsable de l’envoi :
import { Form, TextField, Toggle } from "@liquidify/react"
export function GroupedForm() {
return (
<form onSubmit={(event) => event.preventDefault()}>
<Form>
<Form.Section title="Profile">
<label htmlFor="grouped-name">Nom</label>
<TextField id="grouped-name" name="name" />
<Toggle aria-label="Public profile" defaultChecked />
</Form.Section>
</Form>
</form>
)
}Associez les libellés visibles via htmlFor et id. Utilisez aria-label pour les contrôles sans texte visible. Placez la validation près du champ et reliez-la via l’API documentée. Consultez Accessibilité.