Activity Stream
Report-Fix / Update

Add 3 files to Tasks

Monday , 4:24 PM
Project Status

Marked Design as Completed

Monday , 3:00 PM
UI
Larkon Application UI v2.0.0 Latest

Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar, and pre-order E-commerce & Marketing pages.

Monday , 2:10 PM
avatar-5
Alex Smith Attached Photos
Monday 1:00 PM
avatar-5
Rebecca J. added a new team member

Added a new member to Front Dashboard

Monday 10:00 AM
Achievements

Earned a " Best Product Award"

Monday 9:30 AM
View All
Theme Settings
Color Scheme
Topbar Color
Menu Color
Sidebar Size
Basic Example#

Give textual form controls like <input>s and <textarea>s an upgrade with custom styles, sizing, focus states, and more.

html
                                                                 
                                                                      <div class="mb-3">
                                                                           <label for="simpleinput" class="form-label">Text</label>
                                                                           <input type="text" id="simpleinput" class="form-control">
                                                                      </div>

                                                                      <div class="mb-3">
                                                                           <label for="example-email" class="form-label">Email</label>
                                                                           <input type="email" id="example-email" name="example-email" class="form-control" placeholder="Email">
                                                                      </div>

                                                                      <div class="mb-3">
                                                                           <label for="example-password" class="form-label">Password</label>
                                                                           <input type="password" id="example-password" class="form-control" value="password">
                                                                      </div>

                                                                      <div class="mb-3">
                                                                           <label for="example-palaceholder" class="form-label">Placeholder</label>
                                                                           <input type="text" id="example-palaceholder" class="form-control" placeholder="placeholder">
                                                                      </div>

                                                                      <div class="mb-3">
                                                                           <label for="example-textarea" class="form-label">Text area</label>
                                                                           <textarea class="form-control" id="example-textarea" rows="5"></textarea>
                                                                      </div>
                                                                 
                                                            
Input Sizing#

Set heights using classes like .form-control-lg and .form-control-sm.

html
                                                                 
                                                                      <div class="d-flex flex-column gap-2 mb-3 w-50">
                                                                           <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
                                                                           <input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
                                                                           <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
                                                                      </div>
                                                                 
                                                            
Disabled Input#

Add the disabled boolean attribute on an input to give it a grayed out appearance, remove pointer events, and prevent focusing.

html
                                                                 
                                                                      <input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
                                                                      <input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>
                                                                 
                                                            
Readonly Input#

Add the readonly boolean attribute on an input to prevent modification of the inputโ€™s value. readonly inputs can still be focused and selected, while disabled inputs cannot.

If you want to have <input readonly> elements in your form styled as plain text, replace .form-control with .form-control-plaintext to remove the default form field styling and preserve the correct margin and padding.

html
                                                                 
                                                                      <input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly>
                                                                      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
                                                                 
                                                            
Datalists input#

If you want to have <input readonly> elements in your form styled as plain text, replace .form-control with .form-control-plaintext to remove the default form field styling and preserve the correct margin and padding.

html
                                                                 
                                                                      <label for="exampleDataList" class="form-label">Datalist example</label>
                                                                      <input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
                                                                      <datalist id="datalistOptions">
                                                                           <option value="San Francisco">
                                                                           <option value="New York">
                                                                           <option value="Seattle">
                                                                           <option value="Los Angeles">
                                                                           <option value="Chicago">
                                                                      </datalist> 
                                                                 
                                                            
Select#

Custom <select> menus need only a custom class, .form-select to trigger the custom styles. Custom styles are limited to the <select>โ€™s initial appearance and cannot modify the <option>s due to browser limitations.

The multiple attribute is also supported:

As is the size attribute:

html
                                                       
                                                            <label for="example-select" class="form-label">Default Input Select</label>
                                                            <select class="form-select" id="example-select">
                                                                 <option>1</option>
                                                                 <option>2</option>
                                                                 <option>3</option>
                                                                 <option>4</option>
                                                                 <option>5</option>
                                                            </select>
                                                            <label for="example-multiselect" class="form-label">Multiple Select</label>
                                                            <select id="example-multiselect" multiple="" class="form-control">
                                                                 <option>1</option>
                                                                 <option>2</option>
                                                                 <option>3</option>
                                                                 <option>4</option>
                                                                 <option>5</option>
                                                            </select>
                                                            <label for="example-multiselectsize" class="form-label">Multiple Select Size</label>
                                                            <select id="example-multiselectsize" class="form-select" size="3" aria-label="size 3 select example">
                                                                 <option selected>Open this select menu</option>
                                                                 <option value="1">One</option>
                                                                 <option value="2">Two</option>
                                                                 <option value="3">Three</option>
                                                            </select>
                                                       
                                                  
© Larkon. Crafted by Techzaa