GitHub

FormInput

Examples

Standard usage

Edit this demo

The most common use case is a plain text input with validation:

You typed, "" 

<FormInput
  @label="First Name"
  @value={{this.value}}
  @onInput={{this.setValue}}
  @errors={{this.validationErrors}}
/>

<p class="mt-4">
  You typed, "{{this.value}}"
</p>

No Label

Edit this demo

If you don't want the label then simply leave it out of the component tag:

You typed, "" 

<FormInput
  @value={{this.value}}
  @onInput={{this.setValue}}
  placeholder="I have no label"
/>

<p class="mt-4">
  You typed, "{{this.value}}"
</p>

Input with Hint

Edit this demo

You can pass @hint to the component to add hint content.

InputText support optional hints

You typed, "" 

<FormInput
  @label="I have Hint"
  @hint="InputText support optional hints"
  @value={{this.value}}
  @onInput={{this.setValue}}
/>

<p class="mt-4">
  You typed, "{{this.value}}"
</p>

Input with Button

Edit this demo

This is an example of how to implement an input with a button next to it.

<FormInput
  @value={{this.value}}
  @onInput={{this.setValue}}
  @label="Referral Code"
  @errors={{this.validationErrors}}
  @onChange={{this.validate}}
  placeholder="Input your URL or 6 Digit referral code"
  class="rounded-r-none"
>
  <button
    type="button"
    {{on "click" this.validate}}
    class="px-4 py-2 border text-gray-100 rounded-r
    {{if this.isValid "bg-green-800 border-green-800 hover:bg-green-700" "bg-teal-600 border-teal-600 hover:bg-teal-700"}}"
  >
    {{#if this.isValid}}
      <span>
        Code Applied
      </span>
    {{else}}
      Apply
    {{/if}}
  </button>
</FormInput>

API

Arg Type Description Required Default
value unknown The value to be used in the input. You must also pass `onChange` or `onInput` to update its value. Yes -
containerClass string CSS classes to be added in the container element - -
errors string | string[] A list of errors or a single text describing the error - -
hasError boolean If has errors - -
hasSubmitted boolean If the form has been submitted, used to force displaying errors - -
hint string A help text to be displayed - -
label string The group label - -
onChange (value: string, event: InputEvent) => void Callback when onchange is triggered - -
onFocusIn (event: FocusEvent) => void Callback when onfocus is triggered - -
onFocusOut (event: FocusEvent) => void Callback when onblur is triggered - -
onInput (value: string, event: InputEvent) => void Callback when oninput is triggered - -
showError boolean Force displaying errors - -
size 'sm' | 'lg' The size - -
type string The input type - 'text'
Edit this page on GitHub
FormCheckbox
FormRadioGroup