logo
v2.7.0

Input

Displays a text input element. This is also commonly known as a text box. This component in fact works for all the possible values of <input type="" .../>. The default is input type="text". This Bladewind component simply wraps the HTML input so you are free to use all the various input attributes available in HTML.

        
            <x-bladewind::input  />
        
    

Password Input

This behaves just like the regular HTML password input. Nothing fancy. Any values entered into this field are masked.

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

Reveal Passwords

The component allows you to specify if the user should be able to view the password they entered by clicking on an eye. This can be achieved by setting viewable="true". The eye is appended as a suffix to the input. Clicking on the eye when the password is revealed, hides the pasword. The eye icon will be displayed ONLY if the input type="password". It will be ignored in all other cases.

        
            <x-bladewind::input type="password" suffix="eye"  />
        
    

Numeric Input

This accepts only numeric values. Useful when entering phone numbers, age or amounts. By default the decimal point is not allowed as it is technically not a number. In cases where you need decimals, use the attribute with_dots="true"

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

Minimum & Maximum Values

You may want users to enter a minimum or maximum number when using the numeric input. For example, let's say employees cannot request more than 5 days off per leave request. Your input could restrict the maximum number of days off to 5 when a user is filling the form.



    <x-bladewind::input
        placeholder="Minimum is 3"
        name="input-min"
        numeric="true"
        min="3"
        error_message="Minimum value must be 3"
        show_error_inline="true" />


    <x-bladewind::input
        placeholder="Maximum is 12"
        name="input-max"
        numeric="true"
        max="12"
        error_message="Maximum value must be 12" />

Inputs 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"  />
        
    

Placeholder Text

        
            <x-bladewind::input placeholder="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. This is why Bladewind hides 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 Javascript helper function (validateForm(element)) 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(), validateForm(), hide() and unhide()
            are helper functions available in BladewindUI
            **/

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

            signUp = () => {
                (validateForm('.signup-form')) ?
                    unhide('.btn-save .bw-spinner') : // do this is validated
                    hide('.btn-save .bw-spinner'); // do this if not validated
            }
        
    

Manipulating Inputs Using Javascript

There are several instances where you will want to manipulate input fields for different reasons. Most times, manipulating an input field will be dependent on a user's selection. This can be achieved in Javascript since BladewindUI uses the name attribute defined on an input as part of its class attribute. Let us take a look at a few examples from below.

Sign Up For Summer Camp

In the example below any user below 18 years will need to provide the name and email of their guardian.

Sign up for Summer Camp

You are one step away from an awesome summer experience.


Let's take a look at the code for the form and then proceed to look at the Javascript that's triggered. Pay attention to lines 4 and 12.

        
            ...
            <div class="flex gap-4">
                <x-bladewind::input name="full_name" required="true"  label="Full name" />
                <x-bladewind::input name="age_camp" label="How old are you?"
                    required="true" numeric="true" with_dots="true" />
            </div>
            <b class="guardian-info py-2 block hidden">Who is your guardian?</b>
            <div class="guardian flex gap-4 hidden">
                <x-bladewind::input name="guardian_name_camp" required="true" label="Guardian's Name" />
                <x-bladewind::input name="guardian_email_camp"
                    label="Guardian's email"
                    onkeyup="showAddress(this.value)" />
            </div>
            <x-bladewind::input name="guardian_address" placeholder="Guardian's address" class="hidden" />
            ...
        
    

From the above form, we want to perform an action when the value of the age_camp input field changes. The resultant HTML code generated for the input field is below.

        
            <input
                class="bw-input peer required age_camp placeholder-transparent dark:placeholder-transparent"
                type="text"
                id="age_camp"
                name="age_camp"
                value=""
                autocomplete="off"
                placeholder="How old are you?" />
        
    

The name we provided to the Input component has been used as part of the class names of the component. This makes it easy for us to access the component in Javascript. Below is the script that performs the hiding and unhiding of the DIVs based on the value of the age input. In this example we use an event listener on the age_camp input to listen for any changes to the input on keyup.

Entering a value in the guardian email field also unhides an address field. This however uses an onkeyup event defined on the input field itself.

        
        // dom_el, unhide and hide are helper functions in BladewindUI
        dom_el('.age_camp').addEventListener('keyup', (el) => {
            if(el.target.value !== ''  && el.target.value < 18 ){
                unhide('.guardian-info');
                unhide('.guardian');
            } else {
                hide('.guardian-info');
                hide('.guardian');
            }
        })

        showAddress = (value) => {
            if(value !== '') unhide('.guardian_address');
        }
        
    

To manipulate BladewindUI input elements using Javascript, simply target them using the name defined either in the class or id attributes.

Prefixes and Suffixes

There are cases where you need to prefix or append something to an input field. For example, you want to prefix a URL input field with 'https://' so your users wouldn't need to type that in everytime. Or, when asking your app users for their social media handles you may want to always have the '@' prefix. For now prefixes and suffixes support only text and icons.

Prefixes

You can use prefixes even when your input has a label.

https://
        
            <x-bladewind::input name="site" label="website address" prefix="https://" />
        
    

You can drop the label and use a placeholder instead.

https://
USD
https://github.com/
        
            <x-bladewind::input name="site2" placeholder="website address" prefix="https://" />
        
    
        
            <x-bladewind::input name="usd" placeholder="0.00" prefix="USD" />
        
    
        
            <x-bladewind::input name="twitter" placeholder="Twitter handle" prefix="@" />
        
    
        
            <x-bladewind::input name="gh" placeholder="username" prefix="https://github.com/" />
        
    

Suffixes

Suffixes get appended to the end of the input field

.slack.com
        
            <x-bladewind::input name="space" placeholder="workspace-name" suffix=".slack.com" />
        
    
        
            <x-bladewind::input
                name="tnc"
                placeholder="Your bio. Keep it brief and nice"
                suffix='<a href="#">See some good examples</a>' />
        
    

Prefix and Suffix Transparency

You can opt for non-transparent prefixes and suffixes by setting the attribute transparent_prefix="false" and/or transparent_suffix="false". You can specify both a prefix and suffix on your input fields.

USD
        
            <x-bladewind::input
                name="usdbg"
                placeholder="0.00"
                prefix="USD"
                transparent_prefix="false"
                numeric />
        
    

.slack.com
        
            <x-bladewind::input
                name="spacex"
                placeholder="workspace-name"
                transparent_suffix="false"
                suffix=".slack.com" />
        
    

https://
.slack.com
        
            <x-bladewind::input
                name="spacexx"
                prefix="https://"
                transparent_prefix="false"
                placeholder="workspace-name"
                suffix=".slack.com"
                transparent_suffix="false" />
        
    

Inputs With Icons

The BladewindUI input field can have an icon for those moments where you want a simple icon to describe the field. This is not a different kind of input field. We simply make use of prefixes and suffixes to achieve this effect. All Heroicons names are supported out of the box. You can also specify an SVG tag to be used as an icon.

Since input icons are achieved using prefixes, it is important to add the attribute prefix_is_icon="true" if you are using icons as prefixes or suffix_is_icon="true" if you are using icons as suffixes. This way Bladewind forces your prefix or suffix to be an icon and not text. For example: if you specify the prefix "phone", by default Bladewind will just display the text "phone" as your prefix. However, if you specify prefix_is_icon="true", Bladewind will look for the icon with the name "phone" and display that instead.




        
            <x-bladewind.centered-content size="small">

                <x-bladewind::input
                    name="fullname"
                    placeholder="John T. Doe"
                    prefix="user"
                    prefix_is_icon="true" />

                <x-bladewind::input
                    name="emailic"
                    placeholder="me@bladewindui.com"
                    prefix="envelope"
                    prefix_is_icon="true" />

                <div class="flex gap-4">
                    <x-bladewind::input
                        name="fon"
                        placeholder="0000.000.00"
                        prefix="phone"
                        prefix_is_icon="true" />

                    <x-bladewind::input
                        name="passw" type="password"
                        placeholder="Password"
                        prefix="key"
                        prefix_is_icon="true"
                        prefix_icon_css="text-orange-500"
                        viewable="true" />

                </div>

                <x-bladewind.button class="w-full">Sign Up</x-bladewind.button>

            </x-bladewind.centered-content>
        
    

As explained on the BladewindUI Icon component page, it is possible to use SVG tags and custom SVG files as the input icons.

    
    <x-bladewind::input
    name="www"
    placeholder="website address"
    prefix_is_icon="true"
    prefix='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
</svg>' />
    
    

    
    <x-bladewind::input
    name="www"
    placeholder="website address"
    prefix_is_icon="true"
    transparent_prefix="false"
    prefix='<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" />
</svg>' />
    
    

Clearable Inputs

Clearable fields display an x icon when a field has a value entered. Clicking on the x icon deletes the text in the input field. Quite handy and saves users from clicking the backspace several times in say, a search field. This is achieved by setting the clearable="true" attribute. If there is a table that shares the same name as the input field, it will be reset as well. This is useful when displaying searchable BladewindUI tables.

Input Field Sizes

The input field comes in sizes to match the various button sizes. This is useful if you wish to have an input field and a button on one line. Set the size attribute to achieve this. The tiny size is not supported for input fields because it was just too tiny to make UX sense.


    <x-bladewind::input label="I am small" size="small" />
    
    <x-bladewind::input label="I am regular" />
    
    <x-bladewind::input label="I am medium" size="medium" />
    
    <x-bladewind::input label="I am big" size="big" />
    

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
prefix blank Specify the prefix for the input field
prefix_is_icon false If prefix is specified, is it an icon. By default prefixes are treated as text.
true false
prefix_icon_type outline If an icon is used as a prefix, should it be a solid or outline icon..
outline solid
transparent_prefix true If a prefix is defined, should it have a transparent background or not.
true false
prefix_icon_div_css blank Additional css classes to apply to the DIV containing the prefix if prefix_is_icon=true. Can be any TailwindCSS classes.
prefix_icon_css blank Additional css classes to apply to the prefix if prefix_is_icon=true. Can be any TailwindCSS classes that work on icons.
suffix blank Specify the suffix for the input field
suffix_is_icon false If suffix is specified, is it an icon. By default suffixes are treated as text.
true false
suffix_icon_type outline If an icon is used as a suffix, should it be a solid or outline icon.
outline solid
transparent_suffix true If a suffix is defined, should it have a transparent background or not.
true false
suffix_icon_div_css blank Additional css classes to apply to the DIV containing the suffix if suffix_is_icon=true. Can be any TailwindCSS classes.
suffix_icon_css blank Additional css classes to apply to the suffix if suffix_is_icon=true. Can be any TailwindCSS classes that work on icons.
viewable false Works only if type=password. Should the password be viewable? If true, an eye icon is displayed in the input field.
true false
clearable false Works as a suffix. Appends an 'x' circle for clearing any text that has been entered in the input field.
true false
size medium Sizing of the input to match button sizes in case you have an input and a button on one line.
small regularmedium big

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=""
                size="medium"
                prefix="Email"
                transparent_prefix="false"
                prefix_is_icon="false"
                prefix_icon_type="solid"
                prefix_icon_css=""
                suffix="@gmail.com"
                transparent_suffix="false"
                suffix_is_icon="false"
                suffix_icon_type="solid"
                suffix_icon_css=""
                viewable="false"
                clearable="false"
            />
        
    

 

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