Text Input

<.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>

Your full postal address.

<.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>

Step is set to 10

<.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>

Less than 4 characters

<.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>