Docs Menu

Input Groups

Input Groups have the following properties which are optional:

Property Required? Type Options Description
border no bool
  • false (default)
  • true
 Does the Input Group have a border
columns no int
  • 1 (default)
  • 2
  • 3
  • 4
  • 5
  • 6
 Number of columns inside the Input Group

Basic Examples
Basic Input Group example. 

            
1    <x-fcui-input-group columns="3">
2 
3    <x-fcui-input label="First Name" placeholder="First" />
4 
5    <x-fcui-input label="Middle Name" placeholder="Middle" />
6 
7    <x-fcui-input label="Last Name" placeholder="Last" />
8 
9</x-fcui-input-group>

Advanced Example
Input Group with two columns and a border. 

            
1<x-fcui-input-group columns="2" border="1">
2 
3    <x-fcui-input label="Email"
4                  placeholder="email@address.com"
5                  icon='<i class="fa-regular fa-envelope text-cyan-300"></i>'/>
6 
7    <x-fcui-input label="Username" placeholder="123BestUser" />
8 
9</x-fcui-input-group>