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-neutral-subtle 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: <span class="hljs-title class_">HTMLInputElement</span>

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