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" viewable="true"  />
        
    

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. domEl, unhide and validateForm are helper functions in the package.

        
            /**
            domEl(), validateForm(), hide() and unhide()
            are helper functions available in BladewindUI
            **/

            domEl('.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.

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.

        
        // domEl, unhide and hide are helper functions in BladewindUI
        domEl('.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');
        }
        
    

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.

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

You can drop the label and use a placeholder instead.

        
            <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

        
            <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.

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

    <x-bladewind::input
        name="spacex"
        placeholder="workspace-name"
        transparent_suffix="false"
        suffix=".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.

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