<form class="w-full max-w-sm">
  <.form_field
    label="Username"
    description="Your public display name."
    field={Phoenix.Component.to_form(%{"username" => ""}, as: :demo)[:username]}
    placeholder="shadcn"
  />
</form>

<form class="w-full max-w-sm">
  <.form_field
    label="Email"
    type="email"
    description="We'll never share your email."
    field={Phoenix.Component.to_form(%{"email" => ""}, as: :demo)[:email]}
    placeholder="you@example.com"
  />
</form>

<form class="w-full max-w-sm">
  <.form_field
    label="Password"
    type="password"
    field={Phoenix.Component.to_form(%{"password" => ""}, as: :demo)[:password]}
    placeholder="Enter password"
  />
</form>

<form class="w-full max-w-sm">
  <.form_field
    label="Bio"
    type="textarea"
    description="Max 160 characters."
    field={Phoenix.Component.to_form(%{"bio" => ""}, as: :demo)[:bio]}
    placeholder="Tell us about yourself…"
  />
</form>

<form class="w-full max-w-sm">
  <.form_field
    label="Email Notifications"
    type="switch"
    description="Receive email about new features."
    field={Phoenix.Component.to_form(%{"notifications" => ""}, as: :demo)[:notifications]}
  />
</form>

<form class="w-full max-w-sm">
  <.form_field
    label="Bold"
    type="toggle"
    field={Phoenix.Component.to_form(%{"bold" => ""}, as: :demo)[:bold]}
    variant="outline"
  >
    <svg xmlns="http://www.w3.org/2000/svg" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8" /></svg>
  </.form_field>
</form>

<form class="w-full max-w-sm">
  <.form_field
    label="Accept Terms"
    type="checkbox"
    description="You agree to our Terms of Service."
    field={Phoenix.Component.to_form(%{"terms" => ""}, as: :demo)[:terms]}
  />
</form>

<form class="w-full max-w-sm">
  <.form_field
    disabled
    label="Username"
    field={Phoenix.Component.to_form(%{"username" => ""}, as: :demo)[:username]}
    placeholder="shadcn"
  />
</form>

<form class="w-full max-w-sm">
  <.form_field
    label="Email"
    type="email"
    description="We'll never share your email."
    field={%Phoenix.HTML.FormField{form: %Phoenix.HTML.Form{source: %{action: :validate}, impl: Phoenix.HTML.FormData.Map, id: "demo", name: "demo", data: %{}, params: %{"email" => ""}, hidden: [], errors: [], options: []}, field: :email, id: "demo_email", name: "demo[email]", errors: [{"can't be blank", [validation: :required]}], value: ""}}
    placeholder="you@example.com"
  />
</form>