Docs Menu

Inputs

Inputs have the following properties which are optional:

Property Required? Type Options Description
disabled no string
  • false (default)
  • true
 If the input is disabled
icon no string icon placed inside at the start of the input.
id no string id value of the input.
inputType no string
  • text (default)
  • password
  • number
  • phone
 Type of input (must be one of the four listed).
label no string Text label above the input.
name no string Input name for the input (for fetching POST info)
placeholder no string Placeholder value of the input.
size no string
  • null (default)
  • sm (small)
  • md (medium)
  • lg (large)
 Size of the input.
tip no string Text displayed under the input.
value no string Default value of the input.

Basic Examples
Basic Input example. 

            
1<x-fcui-input label="Email" placeholder="placeholder" />

Advanced Example
Input with a size, type, and icon. 

            
1<x-fcui-input label="Name"
2                       placeholder="your name here"
3                       size="sm"
4                       type="warning"
5                       icon='<i class="fa-regular fa-envelope text-red-400"></i>'/>
A disabled input with a tip and no label with a default value. 
            
1<x-fcui-input placeholder="placeholder"
2                       type="notice"
3                       disabled="true"
4                       tip="This is a tip!"
5                       value="Can't Touch This"/>

This is a tip!