FormInput

Examples

Standard usage

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

First Name

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.

I have Hint

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.

Referral Code

<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'
  @inputClass='rounded-r-none'
>
  <button
    type='button'
    {{on 'click' this.validate}}
    class='px-4 py-2 border text-default-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

FormInput

Element: HTMLInputElement

Arguments

    
            Name
          
            Type
          
            Default
          
            Description
          
                    value
                  
                    *
                  
                  string
                
                  -
              
                The value to be used in the input.
You must also pass `onChange` or `onInput` to update its value.
              
                    containerClass
                  
                  string
                
                  -
              
                CSS classes to be added in the container element
              
                    errors
                  
                  enum
                
                  -
              
                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
              
                    inputClass
                  
                  string
                
                  -
              
                CSS classes to be added in the input element
              
                    label
                  
                  string
                
                  -
              
                The group label
              
                    onChange
                  
                  function
                
                  -
              
                Callback when onchange is triggered
              
                    onFocusIn
                  
                  function
                
                  -
              
                Callback when onfocus is triggered
              
                    onFocusOut
                  
                  function
                
                  -
              
                Callback when onblur is triggered
              
                    onInput
                  
                  function
                
                  -
              
                Callback when oninput is triggered
              
                    showError
                  
                  boolean
                
                  -
              
                Force displaying errors
              
                    size
                  
                  enum
                
                  -
              
                The size
              
                    type
                  
                  string
                
                    'text'
                  
                The input type

Name	Type	Default	Description
`value` *	`string`	-	The value to be used in the input. You must also pass `onChange` or `onInput` to update its value.
`containerClass`	`string`	-	CSS classes to be added in the container element
`errors`	`enum`	-	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
`inputClass`	`string`	-	CSS classes to be added in the input element
`label`	`string`	-	The group label
`onChange`	`function`	-	Callback when onchange is triggered
`onFocusIn`	`function`	-	Callback when onfocus is triggered
`onFocusOut`	`function`	-	Callback when onblur is triggered
`onInput`	`function`	-	Callback when oninput is triggered
`showError`	`boolean`	-	Force displaying errors
`size`	`enum`	-	The size
`type`	`string`	`'text'`	The input type

Blocks

Name	Type	Default	Description
`default` *	`Array`	-