Phenix Storybook

Text Input

Default text input Open in playground 
<.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>
With hint Open in playground

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>
With addon Open in playground
€ 
<.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>
In error Open in playground

this field is in error 

<.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={true}/>
</.phx_form_for>
Number Open in playground

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>
Password Open in playground

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>