bladewindUI

Textbox

Displays a textbox or text input element. This component in fact works for all the possible values of <input type="" .../>. The default type is text.

                    
                        <x-bladewind.input  />
                    
                


Password Textbox

                    
                        <x-bladewind.input type="password"  />
                    
                


Numeric Textbox

                    
                        <x-bladewind.input numeric="true"  />
                    
                


Add Placeholder Text

                    
                        <x-bladewind.input placeholder="Full name"  />
                    
                


With Labels


You can display the BladewindUI textbox with labels. Labels present themselves as placeholders but jump to the top border of the textbox when that field has focus. This is a nice way to build compact looking forms without having form labels in the way. If you prefer to create and style your own form labels, simply ignore the label attribute and use the placeholder attribute instead.

                    
                        <x-bladewind.input label="Full name"  />
                    
                


What Happens When Both Placeholder and Label are Set


The label attribute actually replaces placeholder. In most common cases input labels are displayed above the input box and don't interfere with the input's placeholder text. However, the label for Bladewind's Textbox component is designed to sit in the same spot where the placeholder text is displayed and covers it up. Having a placeholder text that is longer than your label text results in some parts of the placeholder text sticking out under the label. If you want the placeholder to still be shown even when there is a label, set show_placeholder_always="true"

                    
                        <x-bladewind.input 
                            name="mobile" label="Mobile" placeholder="000.0000.000" />
                    
                

From the example above you will notice the placeholder is sticking out under the label. This is because the placeholder text is longer than the label. See why we hide the placeholder when the label is set. One way to fix this is by appending non breaking spaces to your label till the placeholder text is covered. This is an ugly solution.

                    
                        <x-bladewind.input name="mobile" 
                            label="Mobile             " 
                            placeholder="000.0000.000" 
                            show_placeholder_always="true" />
                    
                


Required Fields


This either adds a red asterisk sign to the placeholder text or a red star to the label of the input field.

                    
                        <x-bladewind.input required="true" label="Full name"  />
                    
                


Events


You can append any of the available HTML event attributes (onclick, onblur, onfocus, onmouseover, onmouseout, onkeyup, onkeydown etc) to the component, just like you would to a regular <input ... tag. The border of the textbox below turns red onfocus and to gray onblur.

                    
                        <x-bladewind.input 
                            name="events" 
                            label="Full name" 
                            required="true" 
                            onfocus="changeCss('.events', '!border-2,!border-red-400')" 
                            onblur="changeCss('.events', '!border-2,!border-red-400', 'remove')"  />
                    
                


Validating Required Fields

Bladewind comes with a very handy helper function for validating input and textarea fields that have the attribute required='true" set. The best way to explain this is to look at an actual sign up form example.

Let's take a look at the code for the form and then proceed to break it down.

                    
                        <x-bladewind::notification />

                        <x-bladewind::card>

                            <form method="get" class="signup-form">

                                <h1 class="my-2 text-2xl font-light text-blue-900/80">Create Account</h1>
                                <p class="mt-3 mb-6 text-blue-900/80 text-sm">
                                    This is a sign up form example to demonstrate how to validate forms using Bladewind.
                                </p>

                                <x-bladewind::input 
                                    name="fname" 
                                    required="true" 
                                    label="Full Name" 
                                    error_message="You will need to enter your full name" />
                                
                                <div class="flex gap-4">

                                    <x-bladewind::input 
                                        name="email" 
                                        required="true" 
                                        label="Email" />
                                    
                                    <x-bladewind::input 
                                        name="mobile" 
                                        label="Mobile" 
                                        numeric="true" />

                                </div>

                                <x-bladewind::textarea 
                                    required="true" 
                                    name="bio" 
                                    error_message="Yoh! write something nice about yourself"  
                                    show_error_inline="true"
                                    label="Describe yourself"></x-bladewind::textarea>
                                
                                <div class="text-center">

                                    <x-bladewind::button 
                                        name="btn-save" 
                                        has_spinner="true"
                                        type="primary" 
                                        can_submit="true" 
                                        class="mt-3">
                                        Sign Up Today
                                    </x-bladewind::button>

                                </div>

                            </form>

                        </x-bladewind::card>
                    
                

Error messages can either be displayed inline or using the Bladewind notification component. You will notice we included the Notification component on line 1. On line 5 we have a form with a class of signup-form. This class will be used to set up an event listener on the form. On line 16 out input component defines an error_message attribute. This message is what will be displayed if we validate the form and find that field to be empty. The error_message attribute will only be used if the required="true" attribute has been set on the input component.

Our email input has set required="true" but has no error_message attribute defined. You will notice when we submit the form with no email value, the field is highlighted with a red border but no message is displayed.

Lastly, our textarea component defines a new attribute on line 36. The show_error_inline="true" attribute will display the error message beneath the field the attribute was set on.

Below is the javascript that triggers the validation of the form. dom_el, unhide and validateForm are helper functions in the package.

                    
                        dom_el('.signup-form').addEventListener('submit', function (e){
                            e.preventDefault();
                            signUp();
                        });

                        signUp = () => {
                            if (validateForm('.signup-form')) {

                                // do this if form is validated
                                unhide('.btn-save .bw-spinner')
                            }
                        }
                    
                

 

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Input component.

IMPORTANT: Projects running Laravel 8 please read this

Option Default Available Values
name input-uniqid() Unique name to identify the input element by. Useful for retrieving value from the input when it is submitted in a form. The component by default uses a random name prefixed with 'input-'.
type text Accepts list of valid HTML input element types.
text email password search tel
label blank Label that describes the input element. Example: Full name
numeric false Sepcifies if the input element should accept only numeric characters.
true false
required false Specifies if the input element is required or not. When required, a red asterisk is displayed next to the placeholder or label.
true false
add_clearing true Specifies if an 8px margin should be added to the bottom of the element. This ensures your form fields are evenly spaced by default.
true false
placeholder blank Placeholder text to display in the input element.
show_placeholder_always false Placeholder text is hidden when the label attribute has a value. Setting this to true always shows the placeholder.
true false
error_message blank The message to display when the form is validated and field happens to be blank.
show_error_inline false Error messages can either be displayed inline or using the Notification component (default).
true false
error_heading Error Only used when displaying validation errors using the Notification component. Because the validation errors are triggered from javascript, it may not be easy to translate the heading of the notification message. This provides a way to specify a translatable heading for the error.
selected_value blank Default value to display in the input element. Useful when in edit mode.
with_dots true Mostly relevant if numeric="true". Determines if numeric values can contain dots or not.
true false

 

Input with all attributes defined

                
                    <x-bladewind.input 
                        name="pin"
                        label="Enter PIN" 
                        placeholder=""
                        type="password"
                        numeric="false" 
                        add_clearing="false" 
                        required="true"
                        error_message="PIN can only be 4 digits"
                        show_error_inline="true"
                        error_heading="Bugged"
                        with_dots="true"
                        show_placeholder_always="true"
                        selected_value="" />
                
            

 

The source file for this component is available in resources > views > components > bladewind > input.blade.php