Controlled form

import { useState } from "react"
import { Button, TextField, Toggle } from "@liquidify/react"
import "@liquidify/react/styles.css"

export function ProfileForm() {
  const [name, setName] = useState("")
  const [discoverable, setDiscoverable] = useState(false)

  const save = () => console.log({ name, discoverable })

  return (
    <form onSubmit={(event) => event.preventDefault()}>
      <label htmlFor="display-name">Display name</label>
      <TextField id="display-name" value={name} onChange={setName} />

      <Toggle
        aria-label="Show profile in search"
        checked={discoverable}
        onChange={setDiscoverable}
      />

      <Button variant="glassProminent" onPress={save}>
        Save profile
      </Button>
    </form>
  )
}