<.phx_form_for for={%{}} as={:story} :let={f}>
  <.text_input_group form={f} label="Address" field={:address} placeholder="Please type your address"/>
</.phx_form_for>

<.phx_form_for for={%{}} as={:story} :let={f}>
  <.text_input_group
    form={f}
    label="Address"
    field={:address}
    hint="Your full postal address."
    placeholder="Please type your address"
  />
</.phx_form_for>

<.phx_form_for for={%{}} as={:story} :let={f}>
  <.text_input_group form={f} label="Total price" field={:price} placeholder="How much?" addon="€"/>
</.phx_form_for>

<.phx_form_for for={%{}} as={:story} :let={f}>
  <% f = %{f | data: %{foo: "bad value"}, errors: [foo: {"this field is in error", []}]} %>
  <.text_input_group form={f} label="Foo field" field={:foo} force_feedback/>
</.phx_form_for>

<.phx_form_for for={%{}} as={:story} :let={f}>
  <.text_input_group
    form={f}
    label="Count"
    type={:number}
    step={10}
    field={:count}
    hint="Step is set to 10"
    placeholder="Please pick a number"
  />
</.phx_form_for>

<.phx_form_for for={%{}} as={:story} :let={f}>
  <.text_input_group
    form={f}
    label="Password"
    type={:password}
    field={:password}
    hint="Less than 4 characters"
    placeholder="Please choose a password"
    icon="fal fa-lock"
    can_reveal_password
  />
</.phx_form_for>

<.phx_form_for for={%{}} as={:story} :let={f}>
  <.text_input_group
    form={f}
    label="Secret data"
    type={:password}
    value="RARg/wrHx7/z|Uh=ois>py>%W!Hds&!N-|9uj_9~N[PWeKkATn"
    field={:secret_data}
    readonly
    clipboard
    can_reveal_password
  />
</.phx_form_for>

<.phx_form_for for={%{}} as={:story} :let={f}>
  <.text_input_group
    form={f}
    label="URL to share"
    type={:text}
    value="https://dooh.phenixgroupe.com/c/5a13fb5a-9fac-44a0-ba9e-2bc28cca6e41"
    field={:url_to_share}
    readonly
    clipboard
    clipboard_tooltip_text="Copier l'URL"
  />
</.phx_form_for>